├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── css
    │   │   ├── iconfont
    │   │       ├── iconfont.ttf
    │   │       ├── iconfont.woff
    │   │       ├── iconfont.woff2
    │   │       └── iconfont.css
    │   │   ├── theme
    │   │       └── fonts
    │   │       │   ├── element-icons.ttf
    │   │       │   └── element-icons.woff
    │   │   └── global.css
    ├── components
    │   └── MarkdownRenderer.vue
    ├── main.js
    ├── router
    │   └── index.js
    └── views
    │   ├── manager
    │       ├── About.vue
    │       └── Home.vue
    │   └── Manager.vue
├── babel.config.js
├── doc
    └── PastKing_2024-06-05_13-14-09.gif
├── .env.example
├── .gitignore
├── jsconfig.json
├── vue.config.js
├── package.json
├── .github
    └── workflows
    │   └── jekyll-gh-pages.yml
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PastKing/MarkMap-OpenAi-ChatGpt/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div id="app">
3 |     <router-view/>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/doc/PastKing_2024-06-05_13-14-09.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PastKing/MarkMap-OpenAi-ChatGpt/HEAD/doc/PastKing_2024-06-05_13-14-09.gif


--------------------------------------------------------------------------------
/src/assets/css/iconfont/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PastKing/MarkMap-OpenAi-ChatGpt/HEAD/src/assets/css/iconfont/iconfont.ttf


--------------------------------------------------------------------------------
/src/assets/css/iconfont/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PastKing/MarkMap-OpenAi-ChatGpt/HEAD/src/assets/css/iconfont/iconfont.woff


--------------------------------------------------------------------------------
/src/assets/css/iconfont/iconfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PastKing/MarkMap-OpenAi-ChatGpt/HEAD/src/assets/css/iconfont/iconfont.woff2


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | VUE_APP_API_BASE_URL=https://api.8-km.cn
2 | VUE_APP_API_KEY=sk-xxxxxxx
3 | VUE_APP_DEFAULT_MODEL=gpt-4o
4 | VUE_APP_URL_MODEL=SparkDesk-v4.0
5 | 


--------------------------------------------------------------------------------
/src/assets/css/theme/fonts/element-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PastKing/MarkMap-OpenAi-ChatGpt/HEAD/src/assets/css/theme/fonts/element-icons.ttf


--------------------------------------------------------------------------------
/src/assets/css/theme/fonts/element-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PastKing/MarkMap-OpenAi-ChatGpt/HEAD/src/assets/css/theme/fonts/element-icons.woff


--------------------------------------------------------------------------------
/src/assets/css/global.css:
--------------------------------------------------------------------------------
1 | * {
2 |     box-sizing: border-box;
3 | }
4 | body {
5 |     color: #333;
6 |     font-size: 14px;
7 |     margin: 0;
8 |     padding: 0;
9 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .github
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('@vue/cli-service')
 2 | const dotenv = require('dotenv');
 3 | dotenv.config();
 4 | module.exports = defineConfig({
 5 |   transpileDependencies: true,
 6 |   devServer: {
 7 |     port: 7000
 8 |   },
 9 | 
10 |   chainWebpack: config =>{
11 |     config.plugin('html')
12 |         .tap(args => {
13 |           args[0].title = "MarkMap";
14 |           return args;
15 |         })
16 |   }
17 | })
18 | 


--------------------------------------------------------------------------------
/src/assets/css/iconfont/iconfont.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: "element-icons"; /* Project id 4207690 */
 3 |   src: url('iconfont.woff2?t=1691815051386') format('woff2'),
 4 |        url('iconfont.woff?t=1691815051386') format('woff'),
 5 |        url('iconfont.ttf?t=1691815051386') format('truetype');
 6 | }
 7 | 
 8 | .element-icons {
 9 |   font-family: "element-icons" !important;
10 |   font-size: 16px;
11 |   font-style: normal;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | .el-icon-quanping:before {
17 |   content: "\eb11";
18 | }
19 | 
20 | 


--------------------------------------------------------------------------------
/src/components/MarkdownRenderer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-html="compiledMarkdown"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import MarkdownIt from 'markdown-it';
 7 | 
 8 | export default {
 9 |     name: 'MarkdownRenderer',
10 |     props: {
11 |         content: {
12 |             type: String,
13 |             required: true
14 |         }
15 |     },
16 |     computed: {
17 |         compiledMarkdown() {
18 |             const md = new MarkdownIt();
19 |             console.log(md.render(this.content));
20 |             return md.render(this.content);
21 |         }
22 |     }
23 | };
24 | </script>
25 | 
26 | <style scoped>
27 | 
28 | </style>
29 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import ElementUI from 'element-ui';
 5 | import 'element-ui/lib/theme-chalk/index.css';
 6 | 
 7 | import '@/assets/css/global.css'
 8 | import '@/assets/css/iconfont/iconfont.css'
 9 | import '@/assets/css/theme/index.css'
10 | import 'highlight.js/styles/monokai-sublime.css'
11 | 
12 | Vue.config.productionTip = false
13 | Vue.use(ElementUI, { size: 'small' });
14 | 
15 | console.log('VUE_APP_API_BASE_URL:', process.env.VUE_APP_API_BASE_URL);
16 | console.log('VUE_APP_API_KEY:', process.env.VUE_APP_API_KEY);
17 | 
18 | new Vue({
19 |   router,
20 |   render: h => h(App)
21 | }).$mount('#app')
22 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | const originalPush = VueRouter.prototype.push
 5 | VueRouter.prototype.push = function push (location) {
 6 |   return originalPush.call(this, location).catch(err => err)
 7 | }
 8 | 
 9 | Vue.use(VueRouter)
10 | 
11 | const routes = [
12 |   {
13 |     path: '/',
14 |     name: 'Manager',
15 |     component: () => import('../views/Manager.vue'),
16 |     redirect: '/home',  // 重定向到主页
17 |     children: [
18 |       { path: 'home', name: 'Home', meta: { name: '系统首页' }, component: () => import('../views/manager/Home') },
19 |       { path: 'about', name: 'About', meta: { name: '关于' }, component: () => import('../views/manager/About') },
20 |       ]
21 |   },
22 | ]
23 | 
24 | const router = new VueRouter({
25 |   mode: 'history',
26 |   base: process.env.BASE_URL,
27 |   routes
28 | })
29 | 
30 | export default router
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "axios": "^1.4.0",
11 |     "core-js": "^3.8.3",
12 |     "dotenv": "^16.4.5",
13 |     "echarts": "^5.4.3",
14 |     "element-ui": "^2.15.13",
15 |     "file-saver": "^2.0.5",
16 |     "highlight.js": "^11.8.0",
17 |     "html-to-image": "^1.11.11",
18 |     "markdown-it": "^14.1.0",
19 |     "markmap-common": "^0.17.0",
20 |     "markmap-lib": "^0.17.0",
21 |     "markmap-view": "^0.17.0",
22 |     "openai": "^4.47.2",
23 |     "sass": "^1.77.2",
24 |     "sass-loader": "^14.2.1",
25 |     "vue": "^2.6.14",
26 |     "vue-router": "^3.5.1",
27 |     "wangeditor": "^4.7.15"
28 |   },
29 |   "devDependencies": {
30 |     "@vue/cli-plugin-babel": "~5.0.0",
31 |     "@vue/cli-plugin-router": "~5.0.0",
32 |     "@vue/cli-service": "~5.0.0",
33 |     "vue-template-compiler": "^2.6.14"
34 |   },
35 |   "browserslist": [
36 |     "> 1%",
37 |     "last 2 versions",
38 |     "not dead"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/src/views/manager/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <h1>About Us</h1>
 4 |         <MarkdownRenderer :content="markdownContent" />
 5 |         <img src="https://jsd.cdn.zzko.cn/gh/PastKing/image-tuchuang/收款码-拷贝.4x4g3os37sm0.jpg" alt="收款码" style="width: 200px;"/>
 6 | 
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 | import MarkdownRenderer from '@/components/MarkdownRenderer.vue';
12 | 
13 | export default {
14 |     name: 'About',
15 |     components: {
16 |         MarkdownRenderer,
17 |     },
18 |     data() {
19 |         return {
20 |             markdownContent: `
21 | # 我们的使命
22 | 
23 | 淡泊明志，宁静致远。珍惜原创，矢志不渝。
24 | 
25 | # 我们的目的
26 | 
27 | _开源是为了_ 让所有朋友用上免费的GPT Ai思维导图。
28 | 
29 | # 作者
30 | 
31 | PastKing
32 | 
33 | ![](https://jsd.cdn.zzko.cn/gh/PastKing/image-tuchuang/qrcode_for_gh_4d0c4adc3dae_258.1xj62q31y2u8.jpg)
34 | 
35 | # 源码地址
36 | 
37 | 源码(GitHub)：[mindmap-generator](https://github.com/PastKing/MarkMap-OpenAi-ChatGpt)
38 | 
39 | 源码(Gitee)：[mindmap-generator](https://gitee.com/past-dust/mindmap-generator)
40 | 
41 | # 赞助/支持
42 | `
43 |         };
44 |     }
45 | };
46 | </script>
47 | <style>
48 | 
49 | </style>
50 | 


--------------------------------------------------------------------------------
/.github/workflows/jekyll-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | # Sample workflow for building and deploying a Jekyll site to GitHub Pages
 2 | name: Deploy Jekyll with GitHub Pages dependencies preinstalled
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["gh-pages"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 |   group: "pages"
22 |   cancel-in-progress: false
23 | 
24 | jobs:
25 |   # Build job
26 |   build:
27 |     runs-on: ubuntu-latest
28 |     steps:
29 |       - name: Checkout
30 |         uses: actions/checkout@v4
31 |       - name: Setup Pages
32 |         uses: actions/configure-pages@v5
33 |       - name: Build with Jekyll
34 |         uses: actions/jekyll-build-pages@v1
35 |         with:
36 |           source: ./
37 |           destination: ./_site
38 |       - name: Upload artifact
39 |         uses: actions/upload-pages-artifact@v3
40 | 
41 |   # Deployment job
42 |   deploy:
43 |     environment:
44 |       name: github-pages
45 |       url: ${{ steps.deployment.outputs.page_url }}
46 |     runs-on: ubuntu-latest
47 |     needs: build
48 |     steps:
49 |       - name: Deploy to GitHub Pages
50 |         id: deployment
51 |         uses: actions/deploy-pages@v4
52 | 


--------------------------------------------------------------------------------
/src/views/Manager.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-container>
  4 |       <!--    侧边栏  -->
  5 |       <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
  6 |         <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
  7 |           <span class="logo-title" v-show="!isCollapse">MarkMap</span>
  8 |         </div>
  9 | 
 10 |         <el-menu :default-openeds="['info']" :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255, 255, 255, 0.65)"
 11 |                  active-text-color="#fff" style="border: none" :default-active="$route.path">
 12 |           <el-menu-item index="/home">
 13 |             <i class="el-icon-s-home"></i>
 14 |             <span slot="title">系统首页</span>
 15 |           </el-menu-item>
 16 |             <el-menu-item index="/about">
 17 |                 <i class="el-icon-s-home"></i>
 18 |                 <span slot="title">关于</span>
 19 |             </el-menu-item>
 20 |         </el-menu>
 21 | 
 22 |       </el-aside>
 23 | 
 24 |       <el-container>
 25 |         <!--        头部区域-->
 26 |         <el-header>
 27 | 
 28 |           <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
 29 |           <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
 30 |             <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
 31 |             <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
 32 |           </el-breadcrumb>
 33 | 
 34 |           <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
 35 |             <i class="el-icon-quanping" style="font-size: 26px" @click="handleFull"></i>
 36 |             <el-dropdown placement="bottom">
 37 |               <div style="display: flex; align-items: center; cursor: default">
 38 |                 <img :src="user.avatar || 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80'" alt="" style="width: 40px; height: 40px; border-radius: 50%; margin: 0 5px">
 39 |                 <span>{{ user.name }}</span>
 40 |               </div>
 41 |               <el-dropdown-menu slot="dropdown">
 42 |                 <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
 43 |                 <el-dropdown-item @click.native="$router.push('/password')">修改密码</el-dropdown-item>
 44 |                 <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
 45 |               </el-dropdown-menu>
 46 |             </el-dropdown>
 47 |           </div>
 48 | 
 49 |         </el-header>
 50 | 
 51 |         <!--        主体区域-->
 52 |         <el-main>
 53 |           <router-view @update:user="updateUser" />
 54 |         </el-main>
 55 | 
 56 |       </el-container>
 57 | 
 58 | 
 59 |     </el-container>
 60 |   </div>
 61 | </template>
 62 | 
 63 | <script>
 64 | 
 65 | export default {
 66 |   name: 'HomeView',
 67 |   data() {
 68 |     return {
 69 |       isCollapse: false,  // 不收缩
 70 |       asideWidth: '200px',
 71 |       collapseIcon: 'el-icon-s-fold',
 72 |       user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
 73 |     }
 74 |   },
 75 |   mounted() {   // 页面加载完成之后触发
 76 | 
 77 |   },
 78 |   methods: {
 79 |     handleFull() {
 80 |       document.documentElement.requestFullscreen()
 81 |     },
 82 |     handleCollapse() {
 83 |       this.isCollapse = !this.isCollapse
 84 |       this.asideWidth = this.isCollapse ? '64px' : '200px'
 85 |       this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
 86 |     }
 87 |   }
 88 | }
 89 | </script>
 90 | 
 91 | <style>
 92 | .el-menu--inline {
 93 |   background-color: #000c17 !important;
 94 | }
 95 | .el-menu--inline .el-menu-item {
 96 |   background-color: #000c17 !important;
 97 |   padding-left: 49px !important;
 98 | }
 99 | .el-menu-item:hover, .el-submenu__title:hover {
100 |   color: #fff !important;
101 | }
102 | .el-submenu__title:hover i {
103 |   color: #fff !important;
104 | }
105 | .el-menu-item:hover i {
106 |   color: #fff !important;
107 | }
108 | .el-menu-item.is-active {
109 |   background-color: #1890ff !important;
110 |   border-radius: 5px !important;
111 |   width: calc(100% - 8px);
112 |   margin-left: 4px;
113 | }
114 | .el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip{
115 |   margin-left: -4px;
116 | }
117 | .el-menu-item {
118 |   height: 40px !important;
119 |   line-height: 40px !important;
120 | }
121 | .el-submenu__title {
122 |   height: 40px !important;
123 |   line-height: 40px !important;
124 | }
125 | .el-submenu .el-menu-item {
126 |   min-width: 0 !important;
127 | }
128 | .el-menu--inline .el-menu-item.is-active {
129 |   padding-left: 45px !important;
130 | }
131 | /*.el-submenu__icon-arrow {*/
132 | /*  margin-top: -5px;*/
133 | /*}*/
134 | 
135 | .el-aside {
136 |   transition: width .3s;
137 |   box-shadow: 2px 0 6px rgba(0,21,41,.35);
138 | }
139 | .logo-title {
140 |   margin-left: 5px;
141 |   font-size: 20px;
142 |   transition: all .3s;   /* 0.3s */
143 | }
144 | .el-header {
145 |   box-shadow: 2px 0 6px rgba(0,21,41,.35);
146 |   display: flex;
147 |   align-items: center;
148 | }
149 | </style>
150 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # GPT 思维导图生成器
  2 | 
  3 | > 本项目完全开源
  4 | > 如果觉得不错麻烦帮忙点一次`Star⭐️`
  5 | 
  6 | ## 项目简介
  7 | 
  8 | **MarkMap-OpenAi-ChatGpt** 是一个基于Vue.js的思维导图生成工具，用户可以通过输入标题或内容来生成思维导图。应用集成了`markmap-lib`与`markmap-view`库，支持将思维导图可视化，并且提供了对导图的缩放、适应屏幕等功能。用户还可以将生成的思维导图导出为PNG、SVG、JPEG等格式。
  9 | 
 10 | 该项目适合用于快速整理想法、学习笔记、项目规划等场景。通过简单的输入内容，即可得到一个直观的思维导图，并可持续扩展、下载和分享。
 11 | 
 12 | ## 功能特性
 13 | 
 14 | - 输入标题或内容，生成思维导图
 15 | - 支持连续问答模式，基于已有内容深入生成
 16 | - 思维导图的缩放、适应屏幕等视图控制功能
 17 | - 导出为多种图片格式：PNG、JPEG、SVG
 18 | - 使用现代Web技术：Vue.js、Element UI、markmap-lib
 19 | 
 20 | ## 项目结构
 21 | ```
 22 | ├── public
 23 | │ └── index.html
 24 | ├── src
 25 | │ ├── assets
 26 | │ ├── components
 27 | │ │ └── MarkdownRenderer.vue
 28 | │ ├── views
 29 | │ │ └── Home.vue
 30 | │ │ └── About.vue
 31 | │ ├── App.vue
 32 | │ └── main.js
 33 | ├── .env
 34 | ├── .gitignore
 35 | ├── package.json
 36 | ├── README.md
 37 | └── vue.config.js
 38 | ```
 39 | ## 项目预览
 40 | ![](doc/PastKing_2024-06-05_13-14-09.gif)
 41 | 
 42 | ## 在线演示
 43 | 
 44 | 你可以通过以下链接查看在线演示：
 45 | - [GitHub Pages Demo](https://your-username.github.io/MarkMap-OpenAi-ChatGpt/)
 46 | - [Netlify Demo](https://your-netlify-demo-link)
 47 | - [Vercel Demo](https://your-vercel-demo-link)
 48 | 
 49 | ---
 50 | 
 51 | ## 联系作者
 52 | - **邮箱**：pastking@ltde.cn
 53 | - **公众号**：昔尘科技
 54 | ---
 55 | ## 部署与运行
 56 | 
 57 | ### 环境要求
 58 | 
 59 | 在运行和部署此项目之前，确保你的环境已经安装了以下工具：
 60 | 
 61 | - **Node.js** (推荐版本：v14+)
 62 | - **npm** (Node 包管理工具)
 63 | - **Git** (版本控制工具)
 64 | 
 65 | ### 克隆项目
 66 | 首先，使用以下命令将项目代码克隆到本地：
 67 | 
 68 | ```bash
 69 | git clone https://github.com/PastKing/MarkMap-OpenAi-ChatGpt.git
 70 | cd MarkMap-OpenAi-ChatGpt
 71 | ```
 72 | 
 73 | ### 安装依赖
 74 | 进入 `MarkMap-OpenAi-ChatGpt` 目录后，运行以下命令安装项目所需的依赖：
 75 | 
 76 | ```bash
 77 | npm install
 78 | ```
 79 | 
 80 | ### 本地运行
 81 | 
 82 | 安装完依赖后，使用以下命令启动本地开发服务器：
 83 | 
 84 | ```bash
 85 | npm run serve
 86 | ```
 87 | 
 88 | 在浏览器中访问`http://localhost:7000`，即可查看项目。
 89 | 
 90 | ### 项目构建
 91 | 
 92 | 如果需要将项目部署到生产环境，可以通过以下命令构建项目：
 93 | 
 94 | ```bash
 95 | npm run build
 96 | ```
 97 | 
 98 | 构建后的静态文件会生成在`dist/`目录下，可以将该目录内容上传到任何静态服务器或托管平台。
 99 | 
100 | ---
101 | 
102 | ## 部署到GitHub Pages
103 | 
104 | GitHub Pages 是一个方便的托管静态网站的平台，适合用来发布Vue项目。
105 | 
106 | ### 第一步：构建项目
107 | 
108 | 确保项目已经成功构建，并生成了`dist/`文件夹：
109 | 
110 | ```bash
111 | npm run build
112 | ```
113 | 
114 | ### 第二步：将项目推送到`gh-pages`分支
115 | 
116 | 可以使用`gh-pages`插件来简化这个过程。首先安装`gh-pages`插件：
117 | 
118 | ```bash
119 | npm install --save-dev gh-pages
120 | ```
121 | 
122 | 然后在`package.json`中添加以下脚本：
123 | 
124 | ```json
125 | {
126 |   "scripts": {
127 |     "deploy": "gh-pages -d dist"
128 |   }
129 | }
130 | ```
131 | 
132 | 接下来运行以下命令，将`dist/`目录推送到GitHub的`gh-pages`分支：
133 | 
134 | ```bash
135 | npm run deploy
136 | ```
137 | 
138 | ### 第三步：启用GitHub Pages
139 | 
140 | 1. 打开你的GitHub仓库页面，点击 **Settings**。
141 | 2. 在左侧栏中选择 **Pages**。
142 | 3. 选择源为`gh-pages`分支，保存设置。
143 | 
144 | 几分钟后，你的项目将会在`https://your-username.github.io/MarkMap-OpenAi-ChatGpt/`上访问。
145 | 
146 | ---
147 | 
148 | ## 部署到Netlify
149 | 
150 | Netlify 是一个强大且易用的托管平台，特别适合前端项目的部署。
151 | 
152 | ### 第一步：连接GitHub仓库
153 | 
154 | 1. 登录 [Netlify](https://www.netlify.com/) 并点击 **New site from Git**。
155 | 2. 选择 **GitHub**，授权Netlify访问你的GitHub账户。
156 | 3. 选择你的 **MarkMap-OpenAi-ChatGpt** 仓库。
157 | 
158 | ### 第二步：配置构建设置
159 | 
160 | 在Netlify的项目配置页面中，设置以下内容：
161 | 
162 | - **Build Command**: `npm run build`
163 | - **Publish Directory**: `dist/`
164 | 
165 | 然后点击 **Deploy**，Netlify 会自动构建并托管你的项目。
166 | 
167 | ### 第三步：获取部署链接
168 | 
169 | 项目部署完成后，Netlify 会提供一个访问链接。你可以自定义该链接或使用Netlify提供的默认域名。
170 | 
171 | ---
172 | 
173 | ## 部署到Vercel
174 | 
175 | Vercel 是另一个受欢迎的前端部署平台，具有快速部署和全局CDN支持的特点。
176 | 
177 | ### 第一步：连接GitHub仓库
178 | 
179 | 1. 登录 [Vercel](https://vercel.com/) 并点击 **New Project**。
180 | 2. 选择 **Import Git Repository**，并选择你的 **MarkMap-OpenAi-ChatGpt** 仓库。
181 | 
182 | ### 第二步：配置部署设置
183 | 
184 | Vercel会自动识别Vue项目，默认的设置无需更改：
185 | 
186 | - **Build Command**: `npm run build`
187 | - **Output Directory**: `dist/`
188 | 
189 | 点击 **Deploy** 按钮，Vercel 会开始构建并部署项目。
190 | 
191 | ### 第三步：获取Vercel URL
192 | 
193 | 部署完成后，Vercel 会为你的项目提供一个唯一的URL，你可以使用该链接分享或自定义为你自己的域名。
194 | 
195 | 
196 | ## 常见问题
197 | 
198 | ### 1. 如何修改API请求的URL和密钥？
199 | 你可以在项目的环境配置文件`.env`中配置API的请求地址和密钥。使用以下命令创建并编辑环境文件：
200 | 
201 | ```bash
202 | cp .env.example .env
203 | ```
204 | 
205 | 然后在`.env`文件中修改如下内容：
206 | 
207 | ```bash
208 | VUE_APP_API_BASE_URL=https://your-api-endpoint
209 | VUE_APP_API_KEY=your-api-key
210 | ```
211 | 
212 | ### 2. 部署时出现构建错误如何处理？
213 | 
214 | - 确保Node.js版本符合要求（推荐v14+）。
215 | - 检查项目的依赖是否正确安装，可以尝试删除`node_modules`文件夹并重新运行`npm install`。
216 | - 确保在项目根目录下执行了`npm run build`。
217 | 
218 | ---
219 | 
220 | ## 贡献指南
221 | 
222 | 欢迎任何形式的贡献，以下是贡献步骤：
223 | 
224 | 1. **Fork** 本仓库
225 | 2. 创建你的 **feature 分支** (`git checkout -b feature/your-feature`)
226 | 3. 提交你的修改 (`git commit -m 'Add some feature'`)
227 | 4. 推送到分支 (`git push origin feature/your-feature`)
228 | 5. 创建一个新的 **Pull Request**
229 | 
230 | ---
231 | 
232 | ## 许可证
233 | 
234 | 该项目基于 [MIT License](LICENSE) 许可证开源。你可以自由地使用、修改和分发此项目。
235 | 
236 | ---
237 | 
238 | ## 致谢
239 | 
240 | - 感谢 [markmap-lib](https://github.com/markmap/markmap) 提供的思维导图生成库。
241 | - 感谢 Vue.js 和 Element UI 提供的强大框架。
242 | 
243 | ---
244 | 
245 | [![Powered by DartNode](https://dartnode.com/branding/DN-Open-Source-sm.png)](https://dartnode.com "Powered by DartNode - Free VPS for Open Source")
246 | 
247 | 此文档现已更新为包含进入 `vue` 子目录的操作步骤。如果项目目录结构或构建工具有变化，可以根据实际情况继续调整。
248 | 
249 | 
250 | ## 赞助/支持
251 | <img src="https://jsd.cdn.zzko.cn/gh/PastKing/image-tuchuang/收款码-拷贝.4x4g3os37sm0.jpg" alt="收款码" style="width: 200px;"/>
252 | 


--------------------------------------------------------------------------------
/src/views/manager/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <el-row :gutter="20" class="mind-container">
  3 |         <el-col :span="6" class="left-panel">
  4 |             <!-- 选择输入模式 -->
  5 |             <el-row :gutter="20">
  6 |                 <el-col :span="24">
  7 |                     <el-select v-model="inputMode" placeholder="选择模式">
  8 |                         <el-option label="URL" value="url"></el-option>
  9 |                         <el-option label="自定义文本" value="text"></el-option>
 10 |                     </el-select>
 11 |                 </el-col>
 12 |             </el-row>
 13 |             <el-row :gutter="20" style="margin-top: 20px;">
 14 |                 <!-- 根据选择显示输入框 -->
 15 |                 <el-col :span="24" v-if="inputMode === 'url'">
 16 |                     <el-input v-model="urlInput" placeholder="输入URL"></el-input>
 17 |                 </el-col>
 18 |                 <el-col :span="24" v-if="inputMode === 'text'">
 19 |                     <el-input v-model="title" placeholder="输入标题"></el-input>
 20 |                 </el-col>
 21 |             </el-row>
 22 |             <el-row :gutter="20" style="margin-top: 20px;" v-if="inputMode === 'text'">
 23 |                 <el-col :span="24">
 24 |                     <el-input v-model="editorContent" type="textarea" :rows="10" placeholder="编辑内容"></el-input>
 25 |                 </el-col>
 26 |             </el-row>
 27 |             <el-row :gutter="20" style="margin-top: 20px;">
 28 |                 <el-col :span="12">
 29 |                     <el-button type="primary" @click="generateMindMap">生成</el-button>
 30 |                 </el-col>
 31 |                 <el-col :span="12">
 32 |                     <el-checkbox v-model="continuousQA">连续问答</el-checkbox>
 33 |                 </el-col>
 34 |             </el-row>
 35 |         </el-col>
 36 | 
 37 |         <el-col :span="18" class="right-panel">
 38 |             <div class="svg-container">
 39 |                 <svg ref="svgRef" class="markmap-svg"></svg>
 40 |             </div>
 41 |             <el-row :gutter="10" class="controls">
 42 |                 <el-col :span="4">
 43 |                     <el-button @click="zoomIn">放大</el-button>
 44 |                 </el-col>
 45 |                 <el-col :span="4">
 46 |                     <el-button @click="zoomOut">缩小</el-button>
 47 |                 </el-col>
 48 |                 <el-col :span="4">
 49 |                     <el-button @click="fitToScreen">适应屏幕</el-button>
 50 |                 </el-col>
 51 |                 <el-col :span="12">
 52 |                     <el-dropdown @command="handleDownload" trigger="hover">
 53 |                         <el-button>
 54 |                             下载 <i class="el-icon-arrow-down el-icon--right"></i>
 55 |                         </el-button>
 56 |                         <el-dropdown-menu slot="dropdown">
 57 |                             <el-dropdown-item command="png">.png</el-dropdown-item>
 58 |                             <el-dropdown-item command="jpeg">.jpeg</el-dropdown-item>
 59 |                             <el-dropdown-item command="svg">.svg</el-dropdown-item>
 60 |                         </el-dropdown-menu>
 61 |                     </el-dropdown>
 62 |                 </el-col>
 63 |             </el-row>
 64 |         </el-col>
 65 |     </el-row>
 66 | </template>
 67 | 
 68 | <script>
 69 | import { ref, onMounted, watch, nextTick } from 'vue'
 70 | import { Transformer } from 'markmap-lib'
 71 | import { Markmap } from 'markmap-view'
 72 | import * as htmlToImage from 'html-to-image'
 73 | import { saveAs } from 'file-saver'
 74 | 
 75 | export default {
 76 |     name: 'HomeView',
 77 |     setup() {
 78 |         const transformer = new Transformer()
 79 | 
 80 |         const inputMode = ref('text') // 默认模式为text
 81 |         const urlInput = ref('')     // URL输入框
 82 |         const title = ref('')        // 标题输入框 (用于自定义文本模式)
 83 |         const editorContent = ref(`# 思维导图\n1. 标题1\n - 子标题1\n - 子标题2\n3. 标题2\n4. 标题3\n- beautiful\n- useful\n- easy\n- interactive`)
 84 |         const continuousQA = ref(false)
 85 |         const conversationHistory = ref([])
 86 | 
 87 |         const mm = ref(null)
 88 |         const svgRef = ref(null)
 89 |         const fitToScreenState = ref(false)
 90 | 
 91 |         const update = () => {
 92 |             if (mm.value && svgRef.value) {
 93 |                 const { root } = transformer.transform(editorContent.value)
 94 |                 mm.value.setData(root)
 95 |                 mm.value.fit()
 96 |             }
 97 |         }
 98 | 
 99 |         const zoomIn = () => mm.value && mm.value.rescale(1.25)
100 |         const zoomOut = () => mm.value && mm.value.rescale(0.8)
101 |         const fitToScreen = () => {
102 |             if (mm.value) {
103 |                 mm.value.fit()
104 |                 fitToScreenState.value = true
105 |             }
106 |         }
107 | 
108 |         const generateMindMap = async () => {
109 |             try {
110 |                 const model =
111 |                     (inputMode.value === 'url' ? process.env.VUE_APP_URL_MODEL : process.env.VUE_APP_DEFAULT_MODEL)
112 | 
113 |                 const messages = [
114 |                     {
115 |                         role: 'system',
116 |                         content: inputMode.value === 'url'
117 |                             ? '请分析给定的URL内容，并以markdown格式输出一个相关的思维导图，不要无用的说明，只需呈现主题、子主题、关联关系即可，若无法访问，也要保证思维导图的完整性。确保输出是有效的markdown，以"# 主题"开始，使用"-"或数字来表示层级，不要使用代码块。'
118 |                             : '请设计一个思维导图，以markdown格式输出，不要无用的说明，只需呈现主题、子主题、关联关系即可。确保输出是有效的markdown，以"# 主题"开始，使用"-"或数字来表示层级，不要使用代码块。'
119 |                     },
120 |                     ...conversationHistory.value
121 |                 ]
122 | 
123 |                 if (continuousQA.value && editorContent.value.trim() !== '') {
124 |                     messages.push({
125 |                         role: 'assistant',
126 |                         content: editorContent.value
127 |                     })
128 |                     messages.push({
129 |                         role: 'user',
130 |                         content: `基于上述内容，继续深入探讨"${inputMode.value === 'url' ? urlInput.value : title.value}"这个主题，补充更多相关的想法和概念。`
131 |                     })
132 |                 } else {
133 |                     messages.push({
134 |                         role: 'user',
135 |                         content: inputMode.value === 'url' ? urlInput.value : title.value
136 |                     })
137 |                 }
138 | 
139 |                 const response = await fetch(
140 |                     `${process.env.VUE_APP_API_BASE_URL}/v1/chat/completions`,
141 |                     {
142 |                         method: 'POST',
143 |                         headers: {
144 |                             'Content-Type': 'application/json',
145 |                             'Authorization': `Bearer ${process.env.VUE_APP_API_KEY}`
146 |                         },
147 |                         body: JSON.stringify({
148 |                             messages: messages,
149 |                             stream: true,
150 |                             model: model,
151 |                             temperature: 0.5,
152 |                             presence_penalty: 2
153 |                         })
154 |                     }
155 |                 )
156 | 
157 |                 const reader = response.body.getReader()
158 |                 const decoder = new TextDecoder('utf-8')
159 |                 let result = ''
160 | 
161 |                 while (true) {
162 |                     const { done, value } = await reader.read()
163 |                     if (done) break
164 |                     const chunk = decoder.decode(value, { stream: true })
165 |                     const lines = chunk.split('\n').filter(line => line.trim())
166 |                     for (const line of lines) {
167 |                         if (line === 'data: [DONE]') {
168 |                             editorContent.value = result.trim()
169 |                             if (continuousQA.value) {
170 |                                 conversationHistory.value.push({
171 |                                     role: 'user',
172 |                                     content: inputMode.value === 'url' ? urlInput.value : title.value
173 |                                 })
174 |                                 conversationHistory.value.push({
175 |                                     role: 'assistant',
176 |                                     content: result.trim()
177 |                                 })
178 |                             } else {
179 |                                 conversationHistory.value = []
180 |                             }
181 |                             return
182 |                         }
183 |                         if (line.startsWith('data: ')) {
184 |                             const data = JSON.parse(line.slice(6))
185 |                             if (data.choices[0].delta && data.choices[0].delta.content) {
186 |                                 result += data.choices[0].delta.content
187 |                                 editorContent.value = result // Update the editor content
188 |                             }
189 |                         }
190 |                     }
191 |                 }
192 | 
193 |                 editorContent.value = result.trim()
194 |             } catch (error) {
195 |                 console.error('Error generating mind map:', error)
196 |             }
197 |         }
198 | 
199 |         const handleDownload = async (format) => {
200 |             if (!svgRef.value) return
201 | 
202 |             try {
203 |                 let dataUrl;
204 |                 const svgNode = svgRef.value;
205 | 
206 |                 // 强制适配屏幕下载
207 |                 if (!fitToScreenState.value) {
208 |                     fitToScreen();
209 |                 }
210 |                 // 等待500ms后再下载
211 |                 await new Promise(resolve => setTimeout(resolve, 500));
212 | 
213 |                 // 设置白色背景
214 |                 svgNode.style.backgroundColor = '#ffffff';
215 | 
216 |                 switch (format) {
217 |                     case 'png':
218 |                         dataUrl = await htmlToImage.toPng(svgNode, { backgroundColor: '#ffffff' });
219 |                         break;
220 |                     case 'jpeg':
221 |                         dataUrl = await htmlToImage.toJpeg(svgNode, { backgroundColor: '#ffffff' });
222 |                         break;
223 |                     case 'svg':
224 |                         const svgContent = new XMLSerializer().serializeToString(svgNode);
225 |                         const svgBlob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
226 |                         saveAs(svgBlob, `mindmap.svg`);
227 |                         return;
228 |                     default:
229 |                         throw new Error('Unsupported format');
230 |                 }
231 |                 saveAs(dataUrl, `mindmap.${format}`);
232 |             } catch (error) {
233 |                 console.error('Error saving image:', error);
234 |             }
235 |         }
236 | 
237 |         onMounted(() => {
238 |             nextTick(() => {
239 |                 if (svgRef.value) {
240 |                     mm.value = Markmap.create(svgRef.value)
241 |                     update()
242 |                 }
243 |             })
244 |         })
245 | 
246 |         watch(editorContent, () => {
247 |             nextTick(update)
248 |         })
249 | 
250 |         return {
251 |             inputMode,
252 |             urlInput,
253 |             title,
254 |             editorContent,
255 |             continuousQA,
256 |             generateMindMap,
257 |             zoomIn,
258 |             zoomOut,
259 |             fitToScreen,
260 |             fitToScreenState,
261 |             svgRef,
262 |             handleDownload
263 |         }
264 |     }
265 | }
266 | </script>
267 | 
268 | <style scoped>
269 | .mind-container {
270 |     width: 100%;
271 |     height: 100%;
272 |     display: flex;
273 |     padding: 10px;
274 |     background-color: #f5f5f5;
275 | }
276 | 
277 | .left-panel {
278 |     display: flex;
279 |     flex-direction: column;
280 |     max-height: 100vh;
281 |     overflow: auto;
282 |     padding: 20px;
283 |     background-color: #fff;
284 |     border-right: 1px solid #dcdcdc;
285 |     border-radius: 10px;
286 | }
287 | 
288 | .right-panel {
289 |     display: flex;
290 |     flex-direction: column;
291 |     flex: 1;
292 |     padding: 20px;
293 |     background-color: #fff;
294 |     border-radius: 10px;
295 | }
296 | 
297 | .svg-container {
298 |     flex: 1;
299 |     display: flex;
300 |     justify-content: center;
301 |     align-items: center;
302 |     padding: 20px;
303 |     background-color: #fff;
304 |     border: 1px solid #dcdcdc;
305 |     border-radius: 10px;
306 | }
307 | 
308 | .markmap-svg {
309 |     width: 100%;
310 |     height: 100%;
311 | }
312 | 
313 | .controls {
314 |     display: flex;
315 |     justify-content: center;
316 |     align-items: center;
317 |     height: 50px;
318 |     margin-top: 10px;
319 | }
320 | </style>
321 | 


--------------------------------------------------------------------------------