@fe-free/core 1.5.5 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @fe-free/core
 
+## 1.6.1
+
+### Patch Changes
+
+- feat: md
+  - @fe-free/tool@1.6.1
+
+## 1.6.0
+
+### Minor Changes
+
+- feat: markdown
+
+### Patch Changes
+
+- @fe-free/tool@1.6.0
+
 ## 1.5.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "1.5.5",
+  "version": "1.6.1",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -29,14 +29,17 @@
     "ahooks": "^3.7.8",
     "axios": "^1.6.5",
     "classnames": "^2.5.1",
+    "github-markdown-css": "^5.8.1",
     "lodash-es": "^4.17.21",
     "react-ace": "^11.0.1",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "^9.1.0",
     "react-router-dom": "^6.16.0",
     "react-syntax-highlighter": "^15.5.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "1.5.5"
+    "@fe-free/tool": "1.6.1"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/index.ts

@@ -1,11 +1,8 @@
 export { useGlobalInfiniteScroll } from './ahooks/use_global_infinite_scroll';
 export { useGlobalRequest } from './ahooks/use_global_request';
-
 export { LoadingButton } from './button';
-
 export { CRUD, CRUDDetail, CRUDOfSimple, OperateDelete, useDelete } from './crud';
 export type { CRUDDetailProps, CRUDMethods, CRUDOfSimpleProps, CRUDProps } from './crud';
-
 export { Editor } from './editor';
 export type { EditorProps } from './editor';
 export { EditorJavascript } from './editor_javascript';
@@ -16,7 +13,6 @@ export { EditorLogs } from './editor_logs';
 export type { EditorLogsProps } from './editor_logs';
 export { EditorMarkdown } from './editor_markdown';
 export type { EditorMarkdownProps } from './editor_markdown';
-
 export {
   ProFormEditor,
   ProFormJSON,
@@ -28,8 +24,7 @@ export {
   ProFormSwitchNumber,
   proFormSelectSearchProps,
 } from './form';
-
+export { Markdown } from './markdown';
 export { Table } from './table';
 export type { TableProps } from './table';
-
 export { CustomValueTypeEnum, customValueTypeMap } from './value_type_map';

package/src/markdown/code.tsx

@@ -0,0 +1,30 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+function CodeBlock(props: any) {
+  const { children, className, ...rest } = props;
+  const match = /language-(\w+)/.exec(props.className || '');
+
+  return (
+    <div className="markdown-body-code-block">
+      {match ? (
+        <SyntaxHighlighter
+          {...rest}
+          style={vscDarkPlus}
+          language={match?.[1]}
+          showLineNumbers
+          PreTag="div"
+          wrapLongLines
+        >
+          {children}
+        </SyntaxHighlighter>
+      ) : (
+        <code {...rest} className={className}>
+          {children}
+        </code>
+      )}
+    </div>
+  );
+}
+
+export { CodeBlock };

package/src/markdown/deep_seek.tsx

@@ -0,0 +1,53 @@
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { useState } from 'react';
+
+function DeepSeekBlock(props: { children: string }) {
+  const [show, setShow] = useState(true);
+
+  return (
+    <div className="markdown-body-deep-seek-block mb-3 text-[#00000099] text-[14px] flex flex-col gap-2">
+      <div
+        className="cursor-pointer"
+        onClick={() => {
+          setShow((v) => !v);
+        }}
+      >
+        深度思考 {show ? <UpOutlined /> : <DownOutlined />}
+      </div>
+      {show && (
+        <div className="relative pl-[15px]">
+          <div className="top=0 absolute left-0 h-full w-[2px] bg-[#00000014]" />
+          {props.children === '<br/>' ? undefined : props.children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function processWithDeepSeek(text: string) {
+  // 开始 <think> 才算开始
+  if (!text.startsWith('<think>')) {
+    return text;
+  }
+
+  const [left, right] = text.split('</think>');
+
+  let newText = text;
+
+  // 如果 think 部分是 <think>\n\n</think>，相当于没有，则直接返回 right
+  if (text.startsWith('<think>\n\n</think>')) {
+    newText = right;
+  }
+  // 否则做一些处理
+  else {
+    newText =
+      left
+        .replace('<think>\n', '<think>')
+        .replace('\n</think>', '</think>')
+        .replace(/\n/g, '<br/>') + (right || '');
+  }
+
+  return newText;
+}
+
+export { DeepSeekBlock, processWithDeepSeek };

package/src/markdown/index.tsx

@@ -0,0 +1,32 @@
+import 'github-markdown-css/github-markdown.css';
+import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import { CodeBlock } from './code';
+import { DeepSeekBlock, processWithDeepSeek } from './deep_seek';
+import './style.scss';
+
+function Markdown(props: { children: string }) {
+  const newChildren = useMemo(() => {
+    return processWithDeepSeek(props.children);
+  }, [props.children]);
+
+  return (
+    <div className="markdown-body">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          code: CodeBlock,
+          // @ts-ignore
+          think: DeepSeekBlock,
+        }}
+      >
+        {newChildren}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+export { Markdown };

package/src/markdown/markdown.stories.tsx

@@ -0,0 +1,140 @@
+import { Markdown } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof Markdown> = {
+  title: '@fe-free/core/Markdown',
+  component: Markdown,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Markdown>;
+
+export const Default: Story = {
+  args: {
+    children: `
+# Markdown 组件示例
+
+这是一个 **Markdown** 组件的基本用法示例。
+
+---
+
+## 支持的特性
+
+- 标题
+- 列表
+- 代码高亮
+- 表格
+- 链接与图片
+- 引用
+- 内联代码
+- 分割线
+
+---
+
+## 代码高亮
+
+\`\`\`typescript
+function hello(name: string): string {
+  return \`Hello, \${name}!\`;
+}
+\`\`\`
+
+\`\`\`js
+// long line long line long line long line long line long line long line long line long line long line long line long line long line
+function hello(name: string): string {
+  return \`Hello, \${name}!\`;
+}
+\`\`\`
+
+---
+
+## 表格
+
+| 姓名   | 年龄 | 城市   | 职业       | 邮箱                  | 状态   |状态   |状态   |状态   |
+| ------ | ---- | ------ | ---------- | --------------------- | ------ |------ |------ |------ |
+| 张三   | 28   | 北京   | 前端开发   | zhangsan@example.com  | 在职   |
+| 李四   | 32   | 上海   | 产品经理   | lisi@example.com      | 离职   |
+| 王五   | 24   | 广州   | 设计师     | wangwu@example.com    | 在职   |
+| 赵六   | 29   | 深圳   | 测试工程师 | zhaoliu@example.com   | 实习   |
+
+---
+
+## 链接与图片
+
+[访问 Ant Design 官网](https://ant.design)
+
+![Ant Design Logo](https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg)
+
+---
+
+## 引用
+
+> 这是一段引用文本，可以用于强调内容。
+
+---
+
+## 内联代码
+
+你可以在文本中嵌入 \`const a = 1;\` 这样的内联代码。
+
+---
+
+## 分割线
+
+---
+`,
+  },
+};
+
+export const DeepSeek: Story = {
+  args: {
+    children: `<think>
+好的，我现在需要处理用户的问题。用户一开始用中文打招呼“你好”，然后我的回应应该遵循之前设定的角色和技能。首先，我需要确认用户是否是前端工程师求职者，或者他们需要哪方面的帮助。根据角色设定，我应该先了解他们的具体情况，比如技术栈、工作年限、项目经验和目标城市。
+
+用户可能没有详细说明他们的需求，所以我需要引导他们提供更多信息。根据技能1中的步骤，我应该先询问他们的技术栈、工作年限、项目经验和目标城市。同时，我需要保持友好和专业，确保用户感到被理解和支持。
+
+另外，用户可能对生成卡通头像感兴趣，但根据限制，我需要先处理求职相关的问题，再提及头像生成。因此，在初始回复中，我应该先专注于求职建议，然后在适当的时候提到头像生成选项。
+
+我需要确保回复符合Markdown格式，使用适当的标题和列表结构，使信息清晰易读。同时，避免使用复杂术语，保持语言简洁明了，适合不同水平的用户。
+
+现在，我需要按照模板组织回复，先欢迎用户，然后分步骤询问必要的信息，最后提到头像生成的选项。确保每个问题都明确，帮助用户逐步提供所需的信息，以便我能够提供有针对性的建议。
+</think>
+
+你好！欢迎来到前端工程师求职助手。为了提供更有针对性的建议，请告诉我以下信息：
+
+### 1. 你的技术栈
+- 是否掌握核心三件套（HTML/CSS/JavaScript）？
+- 熟悉哪些前端框架（React/Vue/Angular等）？
+- 是否有Node.js/Webpack/Vite等工程化经验？
+
+### 2. 工作年限
+- 应届毕业生/1-3年经验/3-5年经验/5年以上？
+
+### 3. 项目亮点
+- 请用一句话描述你最具代表性的项目（如：主导开发日均UV百万级的电商前端架构）
+
+### 4. 目标城市
+- 期望在哪个城市发展？
+
+---
+
+💡 **小贴士**：需要生成专属前端工程师卡通头像吗？可同步告知：
+1. 意向职位（如：高级前端开发）
+2. 工作年限
+3. 目标城市
+
+我会根据你的信息提供：求职策略+技术提升路径+简历优化建议+面试指南+定制头像（如需）
+    `,
+  },
+};
+
+export const DeepSeekPending: Story = {
+  args: {
+    children: `<think>
+好的，我现在需要处理用户的问题。用户一开始用中文打招呼“你好”，然后我的回应应该遵循之前设定的角色和技能。首先，我需要确认用户是否是前端工程师求职者，或者他们需要哪方面的帮助。根据角色设定，我应该先了解他们的具体情况，比如技术栈、工作年限、项目经验和目标城市。
+
+    `,
+  },
+};

package/src/markdown/style.scss

@@ -0,0 +1,11 @@
+.markdown-body {
+  pre {
+    padding: 0;
+  }
+
+  .markdown-body-code-block {
+    & > div {
+      margin: 0 !important;
+    }
+  }
+}