"marked": "^4.0.0",
 "mermaid": "^8.14.0",

mermaid版本过高可能会报错，最直接的方法是降低版本。我是vue2+webpack4。本地运行正常。打包打印marked显示undfined。最后降到4.0.0

下载Typed

npm install typed.js

下载marked报错，需要在vue.config.js里面配置 rules

configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    module: {
          rules: [
            {
              test: /\.js$/,
              include: [
                path.resolve(__dirname, 'node_modules/marked')
              ],
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env']
                }
              }
            }
          ]
        }
  },

下面是完整代码

<template>
  <div class="float-menu">
    <div  class="bottom-right-panel">
      <el-input v-model="inputName" placeholder="请输入您要查询的商品名称"></el-input>
      <div style="margin-top: 20px; text-align: right;">
        <el-button type="primary" @click="analyze">开始解析</el-button>
      </div>
    </div>
    <div v-if="showResultDialog" class="deepseek-panel">
      <div class="deepseek-header">
        <img src="https://deepseek.com/favicon.ico" alt="logo" class="logo" />
        <span class="title">菜价数据分析</span>
        <el-button icon="el-icon-close" class="close-btn" circle size="mini" @click="showResultDialog = false"></el-button>
      </div>

      <!-- <div class="deepseek-content" v-html="parsedResult"></div> -->
      <div class="deepseek-content">
        <div ref="resultText"></div>
      </div>

    </div>
  </div>
</template>

<script>
//import marked from 'marked';   //undfined
import * as marked from 'marked';
import mermaid from 'mermaid'; //图表转换
import Typed from 'typed.js' //打字机效果

export default {
  data() {
    return {
    
      showFutureDialog: true,
      showResultDialog: false,
      inputName: '',
      parsedResult: '',

      jsonData: `### 西红柿价格分析报告

#### 一、历史价格分析
1. **数据概览**（2025/4/21-24）：
   - **最高价**：6.5元（4月24日）
   - **最低价**：5元（4月21日）
   - **平均价**：5.78元
   - **波动幅度**：30%（日最大涨幅28%）

2. **价格波动特征**：
   - 呈现"锯齿状"波动，隔日涨跌交替
   - 每日涨跌幅显著（+28%→-18.75%→+25%）
   - 价格中枢逐步上移（5元→6.5元）

3. **可能影响因素**：
   - 短期天气变化（如阴雨影响采摘）
   - 运输成本波动（燃油价格变动）
   - 局部市场供需失衡

#### 二、未来价格预测（未来3-5天）
1. **短期趋势**：
   - 延续震荡上行趋势，但波动加剧
   - 预计波动区间：6.0-7.0元
   - 关键节点：若突破6.8元可能加速上涨

2. **风险提示**：
   - 注意4月25日可能出现技术性回调
   - 周末（4/26-27）餐饮需求或推高价格

#### 三、知识拓扑图谱
\`\`\`mermaid
graph TD
    A[西红柿] --> B[种植技术]
    A --> C[供应链]
    A --> D[价格影响因素]

    B --> B1(温室/露地)
    B --> B2(品种:圣女果/大果)

    C --> C1(产地:山东/云南)
    C --> C2(冷链运输)
    C --> C3(批发市场层级)

    D --> D1(气候异常)
    D --> D2(替代品价格)
    D --> D3(节日需求)
    D --> D4(政策补贴)

    style A fill:#f9d5e5,stroke:#c2185b
    style D fill:#e3f2fd,stroke:#1976d2
\`\`\`

#### 四、操作建议
1. **采购策略**：
   - 近期可逢低（<6元）分批建仓
   - 关注6.8元阻力位突破情况

2. **风险控制**：
   - 设置5.5元止损线
   - 避免单日高价追涨

3. **监测重点**：
   - 山东产区天气预报
   - 黄瓜等替代品价格走势

（注：本分析基于有限数据，建议结合更多维度信息综合判断）`
    };
  },
  methods: {
    
    async analyze() {
      if (!this.inputName.trim()) {
        this.$message.warning('请输入商品名称');
        return;
      }

      this.showFutureDialog = false;
      this.showResultDialog = true;

      const markdown = marked.parse(this.jsonData);
      console.log(markdown)
      // 等待 DOM 渲染完成
      this.$nextTick(() => {
        const el = this.$refs.resultText;
        if (!el) {
          console.error('resultText ref 未渲染');
          return;
        }

        el.innerHTML = ''; // 清空旧内容

        const typed = new Typed(el, {
          strings: [markdown],
          typeSpeed: 10,
          showCursor: false,
          onComplete: () => {
            this.$nextTick(() => {
              this.renderMermaid();
            });
          }
        });
      });
    },
    renderMermaid() {
      const mermaidElements = document.querySelectorAll('.deepseek-content code.language-mermaid');
      mermaidElements.forEach((el, index) => {
        const container = document.createElement('div');
        container.id = `mermaid-${index}`;
        container.className = 'mermaid';
        container.innerHTML = el.textContent;
        el.parentNode.replaceWith(container);
        try {
          mermaid.init(undefined, `#mermaid-${index}`);
        } catch (error) {
          console.error('Mermaid 渲染错误：', error);
        }
      });
    }
  },
  mounted() {
    mermaid.initialize({ startOnLoad: false });
  }
};
</script>

<style scoped>
.float-menu {
  position: fixed;
  right: 30px;
  bottom: 30px;
  text-align: center;
  z-index: 9999;
}

.main-button {
  width: 60px;
  height: 60px;
  font-size: 12px;
}

.options {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fade-enter-active, .fade-leave-active {
  transition: all 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.bottom-right-panel {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 400px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  padding: 20px;
}

.deepseek-panel {
  position: fixed;
  top: 50px;
  right: 50px;
  /* width: 400px; */
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  text-align: left;
  flex-direction: column;
}

.deepseek-header {
  background: linear-gradient(90deg, #3a7bd5 0%, #00d2ff 100%);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  position: relative;
}

.deepseek-header .logo {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.deepseek-header .title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  flex: 1;
}

.deepseek-header .close-btn {
  background: transparent;
  color: white;
  border: none;
  position: absolute;
  right: 10px;
  top: 10px;
}

.deepseek-content {
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
  max-height: 500px;
  width: 800px;
}

.mermaid {
  margin-top: 20px;
}
</style>