📝 Docs: 升级新版 NonePress 主题 (#2375)

website/src/components/Messenger/index.tsx

@@ -1,40 +1,56 @@
-import clsx from "clsx";
 import React from "react";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Logo from "@theme/Logo";
+import clsx from "clsx";
 
-import styles from "./styles.module.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNonepressThemeConfig } from "@nullbot/docusaurus-theme-nonepress/client";
+
+import "./styles.css";
+import ThemedImage from "@theme/ThemedImage";
 
 export type Message = {
-  position?: "left" | "right";
   msg: string;
+  position?: "left" | "right";
+  monospace?: boolean;
 };
 
 function MessageBox({
   msg,
-  isRight,
-}: {
-  msg: string;
-  isRight: boolean;
-}): JSX.Element {
+  position = "left",
+  monospace = false,
+}: Message): JSX.Element {
+  const {
+    navbar: { logo },
+  } = useNonepressThemeConfig();
+  const sources = {
+    light: useBaseUrl(logo!.src),
+    dark: useBaseUrl(logo!.srcDark || logo!.src),
+  };
+
+  const isRight = position === "right";
+
   return (
-    <div
-      className={clsx(styles.message, {
-        [styles.messageRight]: isRight,
-      })}
-    >
-      {isRight ? (
-        <div className={clsx("bg-cyan-600 text-base", styles.messageAvatar)}>
-          <FontAwesomeIcon icon={["fas", "user"]} />
+    <div className={clsx("chat", isRight ? "chat-end" : "chat-start")}>
+      <div className="chat-image avatar">
+        <div
+          className={clsx(
+            "messenger-chat-avatar",
+            isRight && "messenger-chat-avatar-user"
+          )}
+        >
+          {isRight ? (
+            <FontAwesomeIcon icon={["fas", "user"]} />
+          ) : (
+            <ThemedImage sources={sources} />
+          )}
         </div>
-      ) : (
-        <div className={clsx("transparent", styles.messageAvatar)}>
-          <Logo imageClassName="h-full w-full" disabled />
-        </div>
-      )}
+      </div>
       <div
-        className={clsx(styles.messageBox, { "order-first": isRight })}
+        className={clsx(
+          "chat-bubble messenger-chat-bubble",
+          monospace && "font-mono"
+        )}
         dangerouslySetInnerHTML={{
           __html: msg.replace(/\n/g, "<br/>").replace(/ /g, "&nbsp;"),
         }}
@@ -48,62 +64,55 @@ export default function Messenger({
 }: {
   msgs?: Message[];
 }): JSX.Element {
-  const isRight = (msg: Message): boolean => msg.position === "right";
-
   return (
-    <div className="block w-full max-w-full my-4 rounded shadow-md outline-none no-underline bg-light-nonepress-100 dark:bg-dark-nonepress-100">
-      <header className="flex items-center h-12 px-4 bg-blue-500 text-white rounded-t-[inherit]">
-        <div className="text-left text-base grow">
+    <div className="messenger-container">
+      <header className="messenger-title">
+        <div className="messenger-title-back">
           <FontAwesomeIcon icon={["fas", "chevron-left"]} />
         </div>
-        <div className="flex-initial grow-0">
-          <span className="text-xl font-bold">NoneBot</span>
+        <div className="messenger-title-name">
+          <span>NoneBot</span>
         </div>
-        <div className="text-right text-base grow">
-          <FontAwesomeIcon icon={["fas", "user"]} />
+        <div className="messenger-title-more">
+          <FontAwesomeIcon icon={["fas", "bars"]} />
         </div>
       </header>
-      <div className="p-3 min-h-[150px]">
+      <div className="messenger-chat">
         {msgs.map((msg, i) => (
-          <MessageBox msg={msg.msg} isRight={isRight(msg)} key={i} />
+          <MessageBox {...msg} key={i} />
         ))}
       </div>
-      <div className="px-3">
-        <div className="flex flex-row items-center">
-          <div className="flex-1 p-1 max-w-full">
+      <div className="messenger-footer">
+        <div className="messenger-footer-action">
+          <div className="messenger-footer-action-input">
             <input
-              className="w-full rounded bg-light dark:bg-dark focus:outline-none focus:ring focus:border-blue-500"
+              className="input input-xs input-bordered input-info w-full"
               readOnly
             />
           </div>
-          <div className="flex-initial grow-0 w-fit">
-            <button
-              className={clsx(
-                "h-7 px-3 rounded-full bg-blue-500 text-white",
-                styles.messageSendButton
-              )}
-            >
-              <span>发送</span>
+          <div className="messenger-footer-action-send">
+            <button className="btn btn-xs btn-info no-animation text-white">
+              发送
             </button>
           </div>
         </div>
-        <div className="flex flex-row items-center text-center text-base text-gray-600">
-          <div className="p-1 shrink-0 grow-0 basis-1/6">
+        <div className="messenger-footer-tools">
+          <div>
             <FontAwesomeIcon icon={["fas", "microphone"]} />
           </div>
-          <div className="p-1 shrink-0 grow-0 basis-1/6">
+          <div>
             <FontAwesomeIcon icon={["fas", "image"]} />
           </div>
-          <div className="p-1 shrink-0 grow-0 basis-1/6">
+          <div>
             <FontAwesomeIcon icon={["fas", "camera"]} />
           </div>
-          <div className="p-1 shrink-0 grow-0 basis-1/6">
+          <div>
             <FontAwesomeIcon icon={["fas", "wallet"]} />
           </div>
-          <div className="p-1 shrink-0 grow-0 basis-1/6">
+          <div>
             <FontAwesomeIcon icon={["fas", "smile-wink"]} />
           </div>
-          <div className="p-1 shrink-0 grow-0 basis-1/6">
+          <div>
             <FontAwesomeIcon icon={["fas", "plus-circle"]} />
           </div>
         </div>

website/src/components/Messenger/styles.css

@@ -0,0 +1,66 @@
+.messenger {
+  &-container {
+    @apply block w-full my-4 overflow-hidden;
+    @apply rounded-lg outline-none bg-base-200;
+    @apply transition-[background-color] duration-500;
+  }
+
+  &-title {
+    @apply flex items-center h-12 px-4 bg-info text-white;
+
+    &-back {
+      @apply text-left text-base grow;
+    }
+
+    &-name {
+      @apply flex-initial grow-0 text-xl font-bold;
+    }
+
+    &-more {
+      @apply text-right text-base grow;
+    }
+  }
+
+  &-chat {
+    @apply p-4 min-h-[150px];
+
+    &-avatar {
+      @apply !flex items-center justify-center;
+      @apply w-10 rounded-full;
+
+      &-user {
+        @apply bg-info text-white;
+      }
+    }
+
+    &-bubble {
+      @apply bg-base-100 text-base-content [word-break:break-word];
+      @apply transition-[color,background-color] duration-500;
+    }
+  }
+
+  &-footer {
+    @apply px-4;
+
+    &-action {
+      @apply flex items-center gap-2;
+
+      &-input {
+        @apply flex-1;
+
+        & > input {
+          @apply transition-[color,background-color] duration-500;
+        }
+      }
+
+      &-send {
+        @apply flex-initial w-fit;
+      }
+    }
+
+    &-tools {
+      @apply grid grid-cols-6 items-center py-1;
+      @apply text-center text-base text-base-content/60;
+    }
+  }
+}

website/src/components/Messenger/styles.module.css

@@ -1,40 +0,0 @@
-.message {
-  @apply flex flex-row flex-wrap justify-start;
-}
-
-.messageRight {
-  @apply !justify-end;
-}
-
-.message .messageAvatar {
-  @apply relative inline-flex items-center justify-center text-center align-middle h-9 w-9 rounded-full;
-}
-
-.message .messageBox {
-  @apply relative w-fit max-w-[55%] px-2 py-[0.375rem] mx-3 my-2 rounded-lg bg-light;
-}
-:global(.dark) .message .messageBox {
-  @apply !bg-dark;
-}
-
-.message .messageBox::after {
-  content: "";
-  border-bottom: 7px solid;
-  @apply absolute top-0 right-full w-2 h-3 text-light rounded-bl-lg;
-}
-:global(.dark) .message .messageBox::after {
-  @apply !text-dark;
-}
-.message.messageRight .messageBox::after {
-  @apply !left-full !right-auto !rounded-bl-[0] !rounded-br-lg;
-}
-
-.messageSendButton {
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}