feat(webui): 插件商店增加插件详情弹窗并支持通过 url 传递 id 直接打开 (#1615)

* feat(webui): 插件商店增加插件详情弹窗并支持通过 url 传递 id 直接打开

* fix(webui):type check

packages/napcat-webui-frontend/src/components/tailwind_markdown.tsx

@@ -1,43 +1,175 @@
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
-const TailwindMarkdown: React.FC<{ content: string }> = ({ content }) => {
+const TailwindMarkdown: React.FC<{ content: string; }> = ({ content }) => {
   return (
     <Markdown
-      className='prose prose-sm sm:prose lg:prose-lg xl:prose-xl'
+      className='prose prose-sm sm:prose lg:prose-lg xl:prose-xl max-w-none'
       remarkPlugins={[remarkGfm]}
       components={{
         h1: ({ node: _node, ...props }) => (
-          <h1 className='text-2xl font-bold' {...props} />
+          <h1
+            className='text-3xl font-bold mt-6 mb-4 pb-2 border-b-2 border-primary/20 text-default-900 first:mt-0'
+            {...props}
+          />
         ),
         h2: ({ node: _node, ...props }) => (
-          <h2 className='text-xl font-bold' {...props} />
+          <h2
+            className='text-2xl font-bold mt-6 mb-3 pb-2 border-b border-default-200 text-default-800'
+            {...props}
+          />
         ),
         h3: ({ node: _node, ...props }) => (
-          <h3 className='text-lg font-bold' {...props} />
+          <h3
+            className='text-xl font-semibold mt-5 mb-2 text-default-800'
+            {...props}
+          />
+        ),
+        h4: ({ node: _node, ...props }) => (
+          <h4
+            className='text-lg font-semibold mt-4 mb-2 text-default-700'
+            {...props}
+          />
+        ),
+        h5: ({ node: _node, ...props }) => (
+          <h5
+            className='text-base font-semibold mt-3 mb-2 text-default-700'
+            {...props}
+          />
+        ),
+        h6: ({ node: _node, ...props }) => (
+          <h6
+            className='text-sm font-semibold mt-3 mb-2 text-default-600'
+            {...props}
+          />
+        ),
+        p: ({ node: _node, ...props }) => (
+          <p
+            className='my-3 leading-7 text-default-700 first:mt-0 last:mb-0'
+            {...props}
+          />
         ),
-        p: ({ node: _node, ...props }) => <p className='m-0' {...props} />,
         a: ({ node: _node, ...props }) => (
           <a
-            className='text-primary-500 inline-block hover:underline'
+            className='text-primary font-medium hover:text-primary-600 underline decoration-primary/30 hover:decoration-primary transition-colors'
             target='_blank'
+            rel='noopener noreferrer'
             {...props}
           />
         ),
         ul: ({ node: _node, ...props }) => (
-          <ul className='list-disc list-inside' {...props} />
-        ),
-        ol: ({ node: _node, ...props }) => (
-          <ol className='list-decimal list-inside' {...props} />
-        ),
-        blockquote: ({ node: _node, ...props }) => (
-          <blockquote
-            className='border-l-4 border-default-300 pl-4 italic'
+          <ul
+            className='my-3 ml-6 space-y-2 list-disc marker:text-primary'
             {...props}
           />
         ),
-        code: ({ node: _node, ...props }) => (
-          <code className='bg-default-100 p-1 rounded text-xs' {...props} />
+        ol: ({ node: _node, ...props }) => (
+          <ol
+            className='my-3 ml-6 space-y-2 list-decimal marker:text-primary marker:font-semibold'
+            {...props}
+          />
+        ),
+        li: ({ node: _node, ...props }) => (
+          <li
+            className='leading-7 text-default-700 pl-2'
+            {...props}
+          />
+        ),
+        blockquote: ({ node: _node, ...props }) => (
+          <blockquote
+            className='my-4 pl-4 pr-4 py-2 border-l-4 border-primary/50 bg-primary/5 rounded-r-lg italic text-default-600'
+            {...props}
+          />
+        ),
+        pre: ({ node: _node, ...props }) => (
+          <pre
+            className='my-4 p-4 bg-default-100 dark:bg-default-50 rounded-xl overflow-x-auto text-sm border border-default-200 shadow-sm'
+            {...props}
+          />
+        ),
+        code: ({ node: _node, inline, ...props }: any) => {
+          if (inline) {
+            return (
+              <code
+                className='px-1.5 py-0.5 mx-0.5 bg-primary/10 text-primary-700 dark:text-primary-600 rounded text-sm font-mono border border-primary/20'
+                {...props}
+              />
+            );
+          }
+          return (
+            <code
+              className='text-sm font-mono text-default-800'
+              {...props}
+            />
+          );
+        },
+        img: ({ node: _node, ...props }) => (
+          <img
+            className='max-w-full h-auto rounded-lg my-4 shadow-md hover:shadow-xl transition-shadow border border-default-200'
+            {...props}
+          />
+        ),
+        hr: ({ node: _node, ...props }) => (
+          <hr
+            className='my-8 border-0 h-px bg-gradient-to-r from-transparent via-default-300 to-transparent'
+            {...props}
+          />
+        ),
+        table: ({ node: _node, ...props }) => (
+          <div className='my-4 overflow-x-auto rounded-lg border border-default-200 shadow-sm'>
+            <table
+              className='min-w-full divide-y divide-default-200'
+              {...props}
+            />
+          </div>
+        ),
+        thead: ({ node: _node, ...props }) => (
+          <thead
+            className='bg-default-100'
+            {...props}
+          />
+        ),
+        tbody: ({ node: _node, ...props }) => (
+          <tbody
+            className='divide-y divide-default-200 bg-white dark:bg-default-50'
+            {...props}
+          />
+        ),
+        tr: ({ node: _node, ...props }) => (
+          <tr
+            className='hover:bg-default-50 transition-colors'
+            {...props}
+          />
+        ),
+        th: ({ node: _node, ...props }) => (
+          <th
+            className='px-4 py-3 text-left text-xs font-semibold text-default-700 uppercase tracking-wider'
+            {...props}
+          />
+        ),
+        td: ({ node: _node, ...props }) => (
+          <td
+            className='px-4 py-3 text-sm text-default-700'
+            {...props}
+          />
+        ),
+        strong: ({ node: _node, ...props }) => (
+          <strong
+            className='font-bold text-default-900'
+            {...props}
+          />
+        ),
+        em: ({ node: _node, ...props }) => (
+          <em
+            className='italic text-default-700'
+            {...props}
+          />
+        ),
+        del: ({ node: _node, ...props }) => (
+          <del
+            className='line-through text-default-500'
+            {...props}
+          />
         ),
       }}
     >