├── static
    └── favicon.ico
├── assets
    ├── images
    │   ├── demo.jpg
    │   └── gefei.png
    └── icons
    │   ├── close.svg
    │   └── drogdown.svg
├── plugins
    ├── axios.js
    └── filters.js
├── .prettierrc
├── jsconfig.json
├── .editorconfig
├── vercel.json
├── .eslintrc.js
├── README.md
├── nuxt.config.js
├── .gitignore
├── package.json
├── .prettierignore
├── tailwind.config.js
├── pages
    └── index.vue
├── layouts
    └── default.vue
└── components
    └── BaseTable.vue


/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kunsect/roi-calculator/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/assets/images/demo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kunsect/roi-calculator/HEAD/assets/images/demo.jpg


--------------------------------------------------------------------------------
/assets/images/gefei.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kunsect/roi-calculator/HEAD/assets/images/gefei.png


--------------------------------------------------------------------------------
/plugins/axios.js:
--------------------------------------------------------------------------------
1 | export default function ({ $axios }) {
2 |   $axios.onRequest(config => {
3 |     console.log('Making request to ' + config.url)
4 |   })
5 | }


--------------------------------------------------------------------------------
/plugins/filters.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | const formatNumber = (value) => {
4 |   if (!value) return '0'
5 |   return parseInt(value).toLocaleString('en-US')
6 | }
7 | 
8 | Vue.filter('formatNumber', formatNumber)
9 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 100,
 3 |   "tabWidth": 2,
 4 |   "useTabs": false,
 5 |   "singleQuote": true,
 6 |   "semi": false,
 7 |   "trailingComma": "none",
 8 |   "endOfLine": "auto",
 9 |   "bracketSameLine": false
10 | }
11 | 


--------------------------------------------------------------------------------
/assets/icons/close.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2 |     <line x1="3" y1="3" x2="21" y2="21" stroke="#fff" stroke-width="2"/>
3 |     <line x1="3" y1="21" x2="21" y2="3" stroke="#fff" stroke-width="2"/>
4 | </svg>


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 2,
 3 |   "builds": [
 4 |     {
 5 |       "src": "nuxt.config.js",
 6 |       "use": "@nuxtjs/vercel-builder",
 7 |       "config": {
 8 |         "serverFiles": ["package.json", "./.nuxt/dist/sitemap-routes.json"]
 9 |       }
10 |     }
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/assets/icons/drogdown.svg:
--------------------------------------------------------------------------------
 1 | <svg
 2 |   aria-hidden="true"
 3 |   xmlns="http://www.w3.org/2000/svg"
 4 |   fill="none"
 5 |   viewBox="0 0 10 6"
 6 |   class="w-2.5 h-2.5 ml-2.5"
 7 | >
 8 |   <path
 9 |     stroke="#fff"
10 |     stroke-linecap="round"
11 |     stroke-linejoin="round"
12 |     stroke-width="2"
13 |     d="m1 1 4 4 4-4"
14 |   ></path>
15 | </svg>


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true,
 6 |   },
 7 |   parserOptions: {
 8 |     parser: '@babel/eslint-parser',
 9 |     requireConfigFile: false,
10 |     
11 |   },
12 |   extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'prettier'],
13 |   plugins: [],
14 |   // add your custom rules here
15 |   rules: {
16 |     'vue/no-v-html': 'off',
17 |     'no-console': 'off'
18 |   },
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Keywords ROI Calculator - 导入 Semrush Excel 自动计算关键词优化回报率
 2 | 
 3 | 在 Semrush 搜索关键词并导出 xlsx 之后，可以导入到该项目，会通过公式自动计算每个关键词对应的优化回报率。Excel 均在本地设备处理，不会上传到任何远程服务器。
 4 | 
 5 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/Kunsect/roi-calculator)
 6 | 
 7 | [![ROI Calculator Demo](/assets/images/demo.jpg)](https://roi-calculator-flame.vercel.app/)
 8 | 
 9 | ## 贡献
10 | 
11 | 欢迎您参与项目的优化和改进。如果你想为本项目做出贡献，或者有任何问题和建议，请在 Issues 中提出。
12 | 
13 | ## 版权和许可
14 | 
15 | 本项目采用 [MIT License](https://choosealicense.com/licenses/mit/).
16 | 
17 | ## 致谢
18 | 
19 | 感谢哥飞提出的建议和 ROI 计算逻辑，哥飞的社群主要面向技术开发者、产品经理、设计师等人群，大家一起讨论独立开发、出海产品、流量获取、流量变现等话题，欢迎关注：
20 | 
21 | <img src="/assets/images/gefei.png" width="300" alt="gefei wechat">


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | require('dotenv').config()
 2 | 
 3 | export default {
 4 |   mode: 'universal',
 5 | 
 6 |   // Global page headers: https://go.nuxtjs.dev/config-head
 7 |   head: {
 8 |     title: 'roi-calculator-nuxt',
 9 |     htmlAttrs: {
10 |       lang: 'en',
11 |     },
12 |     meta: [
13 |       { charset: 'utf-8' },
14 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
15 |       { hid: 'description', name: 'description', content: '' },
16 |       { name: 'format-detection', content: 'telephone=no' },
17 |     ],
18 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
19 |   },
20 | 
21 |   // Global CSS: https://go.nuxtjs.dev/config-css
22 |   css: [],
23 | 
24 |   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
25 |   plugins: [
26 |     '~/plugins/axios',
27 |     '~/plugins/filters.js'
28 |   ],
29 | 
30 |   // Auto import components: https://go.nuxtjs.dev/config-components
31 |   components: true,
32 | 
33 |   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
34 |   buildModules: [
35 |     '@nuxtjs/eslint-module',
36 |     '@nuxtjs/tailwindcss',
37 |     '@nuxtjs/google-gtag',
38 |     ...(process.env.NODE_ENV !== 'production' ? ['@nuxtjs/proxy'] : []),
39 |   ],
40 | 
41 |   // Modules: https://go.nuxtjs.dev/config-modules
42 |   modules: [
43 |     '@nuxtjs/axios',
44 |     '@nuxtjs/sitemap'
45 |   ],
46 | 
47 |   build: {},
48 | 
49 |   proxy: {
50 |     '/api/': {
51 |       target: process.env.DEV_URL,
52 |       pathRewrite: { '^/api/': '/' }
53 |     },
54 |   },
55 | }
56 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "roi-calculator-nuxt",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt",
 7 |     "build": "nuxt generate",
 8 |     "start": "nuxt start",
 9 |     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
10 |     "lint:style": "stylelit",
11 |     "generate": "nuxt gent \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
12 |     "lint:prettier": "prettier --check .",
13 |     "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
14 |     "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix && npm run lint:style -- --fix"
15 |   },
16 |   "dependencies": {
17 |     "@nuxtjs/axios": "^5.13.6",
18 |     "@nuxtjs/proxy": "^2.1.0",
19 |     "@nuxtjs/sitemap": "^2.4.0",
20 |     "@tailwindcss/aspect-ratio": "^0.4.2",
21 |     "core-js": "^3.25.3",
22 |     "dotenv": "^16.3.1",
23 |     "node-fetch-native": "^1.4.0",
24 |     "nuxt": "^2.15.8",
25 |     "vue": "^2.7.10",
26 |     "vue-server-renderer": "^2.7.10",
27 |     "vue-template-compiler": "^2.7.10",
28 |     "xlsx": "^0.18.5"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/eslint-parser": "^7.19.1",
32 |     "@nuxtjs/eslint-config": "^11.0.0",
33 |     "@nuxtjs/eslint-module": "^3.1.0",
34 |     "@nuxtjs/google-gtag": "^1.0.4",
35 |     "@nuxtjs/tailwindcss": "^5.3.3",
36 |     "@nuxtjs/vercel-builder": "^0.24.0",
37 |     "eslint": "^8.24.0",
38 |     "eslint-config-prettier": "^8.5.0",
39 |     "eslint-plugin-nuxt": "^4.0.0",
40 |     "eslint-plugin-vue": "^9.5.1",
41 |     "file-saver": "^2.0.5",
42 |     "postcss": "^8.4.17",
43 |     "postcss-html": "^1.5.0",
44 |     "prettier": "^2.7.1"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | ###
 2 | # Place your Prettier ignore content here
 3 | 
 4 | ###
 5 | # .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506
 6 | 
 7 | # Created by .ignore support plugin (hsz.mobi)
 8 | ### Node template
 9 | # Logs
10 | /logs
11 | *.log
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | 
16 | # Runtime data
17 | pids
18 | *.pid
19 | *.seed
20 | *.pid.lock
21 | 
22 | # Directory for instrumented libs generated by jscoverage/JSCover
23 | lib-cov
24 | 
25 | # Coverage directory used by tools like istanbul
26 | coverage
27 | 
28 | # nyc test coverage
29 | .nyc_output
30 | 
31 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
32 | .grunt
33 | 
34 | # Bower dependency directory (https://bower.io/)
35 | bower_components
36 | 
37 | # node-waf configuration
38 | .lock-wscript
39 | 
40 | # Compiled binary addons (https://nodejs.org/api/addons.html)
41 | build/Release
42 | 
43 | # Dependency directories
44 | node_modules/
45 | jspm_packages/
46 | 
47 | # TypeScript v1 declaration files
48 | typings/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 
68 | # parcel-bundler cache (https://parceljs.org/)
69 | .cache
70 | 
71 | # next.js build output
72 | .next
73 | 
74 | # nuxt.js build output
75 | .nuxt
76 | 
77 | # Nuxt generate
78 | dist
79 | 
80 | # vuepress build output
81 | .vuepress/dist
82 | 
83 | # Serverless directories
84 | .serverless
85 | 
86 | # IDE / Editor
87 | .idea
88 | 
89 | # Service worker
90 | sw.*
91 | 
92 | # macOS
93 | .DS_Store
94 | 
95 | # Vim swap files
96 | *.swp
97 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: ["*.{html,js}"],
 3 | 
 4 |   theme: {
 5 |     extend: {
 6 |       colors: {
 7 |         'dark-blue': '#12151e',  // 这是 dark-blue 的基础色值，你可以根据实际情况进行调整。
 8 |       },
 9 |       backgroundColor: {
10 |         'dark-blue': '#12151e',
11 |         'medium-blue': '#2c3349',
12 |         'medium-blueHover': '#303850',
13 |         'dark-medium-blue': '#222839',
14 |         'orange': '#cc5514',
15 |         'orangeHover': '#df5c16',
16 |         'grey': '#8f94a3'
17 |       },
18 |       gradientColorStops: theme => ({
19 |         'from-dark-blue-0': theme('colors.dark-blue.0', 'rgba(#12151e, 0)'),
20 |         'to-dark-blue-80': theme('colors.dark-blue.80', 'rgba(#12151e, 0.8)')
21 |       }),
22 |       borderColor: {
23 |         'grey': '#8f94a3',
24 |         'orange': '#cc5514',
25 |         'medium-blue': '#2c3349'
26 |       },
27 |       textColor: {
28 |         'grey': '#8f94a3',
29 |         'orange': '#cc5514'
30 |       },
31 |       boxShadow: {
32 |         'button-secondary': '0px 2px 3px 0px rgba(0,0,0,.16), inset 0px 1px 2px 0px rgba(242,242,242,.16), inset 0px -1px 2px 0px rgba(0,0,0,.2)',
33 |         'button-primary': 'inset 0px 1px 2px 0px rgba(242,176,140,1), 0px 2px 3px 0px rgba(0,0,0,.16), inset 0px -1px 2px 0px rgba(0,0,0,.4)',
34 |       },
35 |     },
36 |   },
37 |   variants: {
38 |     extend: {
39 |       opacity: ['disabled'],
40 |       cursor: ['disabled'],
41 |     },
42 |   },
43 |   plugins: [
44 |     require('@tailwindcss/aspect-ratio'),
45 |     function ({ addBase }) {
46 |       addBase({
47 |         'input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button': {
48 |           '-webkit-appearance': 'none',
49 |           margin: '0',
50 |         },
51 |         'input[type="number"]': {
52 |           '-moz-appearance': 'textfield',
53 |         },
54 |       });
55 |     },
56 |   ],
57 | }


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="main" class="flex h-full min-h-screen w-full flex-col bg-dark-blue font-rubik">
 3 |     <main class="flex-grow">
 4 |       <div class="sm:mt24 mt-16 flex flex-col items-center justify-center px-4 text-white">
 5 |         <div class="flex w-full max-w-7xl flex-col items-center justify-center">
 6 |           <div class="flex flex-col items-center justify-center">
 7 |             <div class="flex w-full flex-col items-center justify-center space-y-2">
 8 |               <h1
 9 |                 class="flex flex-row items-center justify-center space-x-2 text-center text-3xl font-bold text-white"
10 |               >
11 |                 <span class="text-orange">Keywords&nbsp;</span>ROI Calculator
12 |               </h1>
13 |               <h2
14 |                 data-screenshot="false"
15 |                 class="pb-10 text-center font-normal text-grey sm:pb-16 sm:text-lg"
16 |               >
17 |                 Import Semrush Excel to Generate Keywords ROI Table.
18 |               </h2>
19 |             </div>
20 |           </div>
21 |           <button
22 |             class="mb-5 flex w-full min-w-max flex-row items-center justify-center space-x-2 rounded-lg bg-orange py-3 px-5 text-base font-medium text-white shadow-button-primary transition-all duration-100 hover:bg-orangeHover active:bg-orange sm:w-fit disabled:opacity-50 disabled:cursor-not-allowed"
23 |             :disabled="btnDisabled"
24 |             @click="triggerFileInput"
25 |           >
26 |             Import Semrush Excel &nbsp; &nbsp;
27 |             <svg
28 |               width="15"
29 |               height="15"
30 |               viewBox="0 0 15 15"
31 |               fill="none"
32 |               xmlns="http://www.w3.org/2000/svg"
33 |             >
34 |               <path
35 |                 d="M12.1714 3.983L2.12989 14.0245L0.480225 12.3748L10.5206 2.33333H1.67139V0H14.5047V12.8333H12.1714V3.983Z"
36 |                 fill="#FFFBF7"
37 |               ></path>
38 |             </svg>
39 |           </button>
40 |           <p class="font-normal text-grey">
41 |             * The content uploaded is processed solely on your local device.
42 |           </p>
43 |           <input ref="fileInput" type="file" class="hidden" @change="handleFileUpload" />
44 | 
45 |           <BaseTable ref="baseTable" />
46 |         </div>
47 |       </div>
48 |     </main>
49 |   </div>
50 | </template>
51 | 
52 | <script>
53 | import * as XLSX from 'xlsx'
54 | 
55 | export default {
56 |   data() {
57 |     return {
58 |       btnDisabled: false
59 |     }
60 |   },
61 | 
62 |   methods: {
63 |     triggerFileInput() {
64 |       this.$refs.fileInput.click()
65 |     },
66 | 
67 |     handleFileUpload(event) {
68 |       const file = event.target.files[0]
69 | 
70 |       if (file) {
71 |         this.btnDisabled = true
72 | 
73 |         const reader = new FileReader()
74 |         reader.onload = (e) => {
75 |           const data = e.target.result
76 |           const workbook = XLSX.read(data, { type: 'binary' })
77 |           const sheetName = workbook.SheetNames[0]
78 |           const sheet = workbook.Sheets[sheetName]
79 |           const jsonData = XLSX.utils.sheet_to_json(sheet)
80 | 
81 |           this.$refs.baseTable.processData(jsonData)
82 | 
83 |           this.btnDisabled = false
84 |         }
85 | 
86 |         reader.readAsBinaryString(file)
87 |       }
88 |     }
89 |   }
90 | }
91 | </script>
92 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="overflow-x-hidden bg-dark-blue">
 3 |     <header>
 4 |       <div class="relative bottom-0 font-rubik text-base font-normal text-white">
 5 |         <div
 6 |           class="realtive mx-auto flex max-w-7xl items-center justify-between py-6 px-4 sm:px-6 md:space-x-10 lg:px-8"
 7 |         >
 8 |           <a href="/" class="flex text-base text-white font-bold">
 9 |             <span class="text-orange">Keywords &nbsp;</span>ROI Calculator
10 |           </a>
11 |           <div class="hidden flex-row items-center justify-center space-x-4 sm:flex sm:space-x-10">
12 |             <div class="flex flex-row items-center justify-center space-x-2 sm:space-x-4">
13 |               <a
14 |                 href="https://github.com/Kunsect/roi-calculator"
15 |                 type="button"
16 |                 class="flex w-full min-w-max flex-row items-center justify-center space-x-2 rounded-lg bg-medium-blue py-2 px-3 text-sm font-semibold text-white shadow-button-secondary transition-all duration-100 hover:bg-medium-blueHover active:bg-medium-blue sm:w-fit sm:px-5 sm:text-base"
17 |               >
18 |                 <span>Github</span>
19 |               </a>
20 |             </div>
21 |           </div>
22 |           <div
23 |             class="absolute bottom-0 left-0 h-[1px] w-screen bg-medium-blue sm:-translate-x-10"
24 |           ></div>
25 |         </div>
26 |       </div>
27 |     </header>
28 | 
29 |     <nuxt />
30 | 
31 |     <footer
32 |       class="mt-24 flex w-full flex-col items-center justify-center space-y-16 bg-gradient-to-br from-[#222839] to-[#12151E] px-4 pt-20 pb-20 font-rubik text-grey sm:mt-32 sm:space-y-20"
33 |     >
34 |       <div class="flex w-full max-w-7xl flex-col items-center justify-center space-y-16">
35 |         <div class="flex flex-col items-center justify-center space-y-4">
36 |           <a
37 |             href="https://github.com/Kunsect/roi-calculator"
38 |             rel="noopener noreferrer"
39 |             target="_blank"
40 |             class="transition-all duration-200 hover:-rotate-12 hover:scale-110 active:scale-90 active:duration-100"
41 |           >
42 |             <svg
43 |               aria-hidden="true"
44 |               class="h-10 w-10 fill-gray-500 group-hover:fill-gray-300"
45 |               xmlns="http://www.w3.org/2000/svg"
46 |               fill="none"
47 |               viewBox="0 0 24 24"
48 |             >
49 |               <path
50 |                 d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z"
51 |               ></path>
52 |             </svg>
53 |           </a>
54 |           <p class="text-sm">© 2023 Kunsect LLC. All rights reserved.</p>
55 |         </div>
56 |       </div>
57 |     </footer>
58 |   </div>
59 | </template>
60 | 
61 | <script>
62 | export default {
63 |   head() {
64 |     return {
65 |       title: 'Keywords ROI Calculator',
66 |       meta: [
67 |         {
68 |           hid: 'description',
69 |           name: 'description',
70 |           content: 'Import Semrush Excel to Generate ROI Table. | Keywords ROI Calculator'
71 |         }
72 |       ]
73 |     }
74 |   }
75 | }
76 | </script>
77 | 


--------------------------------------------------------------------------------
/components/BaseTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="mt-6 flex w-full flex-col space-y-8 sm:mt-12 px-4 sm:px-6 md:space-x-10 lg:px-8">
  3 |     <div class="shadow-md rounded-lg mx-auto w-full">
  4 |       <div class="flex justify-end mb-6 space-x-4">
  5 |         <div class="relative">
  6 |           <button
  7 |             type="button"
  8 |             class="z-10 px-4 py-2 font-medium text-center text-white bg-medium-blue border-medium-blue rounded-lg space-x-2"
  9 |             @click="kd.visible = !kd.visible"
 10 |           >
 11 |             <div v-if="kd.values.length" class="flex">
 12 |               <span class="mr-2">KD: {{ kd.values[0] }}-{{ kd.values[1] }}%</span>
 13 |               <img
 14 |                 v-if="kd.values.length"
 15 |                 src="~/assets/icons/close.svg"
 16 |                 width="14"
 17 |                 @click.stop="updateKd([])"
 18 |               />
 19 |             </div>
 20 |             <div v-else class="flex">
 21 |               <span class="text-grey mr-6">KD %</span>
 22 |               <img src="~/assets/icons/drogdown.svg" width="12" />
 23 |             </div>
 24 |           </button>
 25 |           <div
 26 |             v-if="kd.visible"
 27 |             class="absolute top-full left-0 mt-2 bg-medium-blue rounded-lg shadow-lg py-2 z-20 w-full"
 28 |           >
 29 |             <div
 30 |               v-for="(item, index) in kd.selections"
 31 |               :key="index"
 32 |               class="flex justify-center px-4 py-2"
 33 |               @click="updateKd(item)"
 34 |             >
 35 |               <span class="text-grey cursor-pointer">{{ item[0] }}-{{ item[1] }}%</span>
 36 |             </div>
 37 | 
 38 |             <div class="border-t border-grey m-2"></div>
 39 | 
 40 |             <div class="px-2 py-1.5 space-y-2">
 41 |               <span class="text-white">定制范围</span>
 42 |               <input
 43 |                 v-model="kd.min"
 44 |                 type="number"
 45 |                 class="w-full rounded-lg bg-dark-medium-blue px-4 py-2 text-sm text-white focus:outline-none"
 46 |                 placeholder="从"
 47 |               />
 48 |               <input
 49 |                 v-model="kd.max"
 50 |                 type="number"
 51 |                 class="w-full rounded-lg bg-dark-medium-blue px-4 py-2 text-sm text-white focus:outline-none"
 52 |                 placeholder="到"
 53 |               />
 54 |               <button
 55 |                 class="w-full py-1.5 items-center justify-center rounded-lg bg-orange text-sm font-medium text-white shadow-button-primary transition-all duration-100 hover:bg-orangeHover active:bg-orange"
 56 |                 @click="updateKd([kd.min, kd.max])"
 57 |               >
 58 |                 应用
 59 |               </button>
 60 |             </div>
 61 |           </div>
 62 |         </div>
 63 | 
 64 |         <div class="flex relative">
 65 |           <button
 66 |             type="button"
 67 |             class="z-10 px-4 py-2 font-medium text-center text-white bg-medium-blue border-medium-blue rounded-lg space-x-2"
 68 |             @click="volume.visible = !volume.visible"
 69 |           >
 70 |             <div v-if="volume.values.length" class="flex">
 71 |               <span v-if="volume.values[1] === 99999999" class="mr-2">
 72 |                 Volume: {{ volume.values[0] | formatNumber }}+
 73 |               </span>
 74 |               <span v-else class="mr-2">
 75 |                 Volume: {{ volume.values[0] | formatNumber }}-{{ volume.values[1] | formatNumber }}
 76 |                 &nbsp;
 77 |               </span>
 78 |               <img src="~/assets/icons/close.svg" width="14" @click.stop="updateVolume([])" />
 79 |             </div>
 80 | 
 81 |             <div v-else class="flex">
 82 |               <span class="text-grey mr-14">Volume</span>
 83 |               <img src="~/assets/icons/drogdown.svg" width="12" />
 84 |             </div>
 85 |           </button>
 86 |           <div
 87 |             v-if="volume.visible"
 88 |             class="absolute top-full left-0 mt-2 bg-medium-blue rounded-lg shadow-lg py-2 z-20 w-full"
 89 |           >
 90 |             <div
 91 |               v-for="(item, index) in volume.selections"
 92 |               :key="index"
 93 |               class="flex px-4 py-2"
 94 |               @click="updateVolume(item)"
 95 |             >
 96 |               <span v-if="item[1] === 99999999" class="text-grey cursor-pointer">
 97 |                 {{ item[0] | formatNumber }}+
 98 |               </span>
 99 |               <span v-else class="text-grey cursor-pointer">
100 |                 {{ item[0] | formatNumber }}-{{ item[1] | formatNumber }}
101 |               </span>
102 |             </div>
103 | 
104 |             <div class="border-t border-grey m-2"></div>
105 | 
106 |             <div class="px-2 py-1.5 space-y-2">
107 |               <span class="text-white">定制范围</span>
108 |               <input
109 |                 v-model="volume.min"
110 |                 type="number"
111 |                 class="w-full rounded-lg bg-dark-medium-blue px-4 py-2 text-sm text-white focus:outline-none"
112 |                 placeholder="从"
113 |               />
114 |               <input
115 |                 v-model="volume.max"
116 |                 type="number"
117 |                 class="w-full rounded-lg bg-dark-medium-blue px-4 py-2 text-sm text-white focus:outline-none"
118 |                 placeholder="到"
119 |               />
120 |               <button
121 |                 class="w-full py-1.5 items-center justify-center rounded-lg bg-orange text-sm font-medium text-white shadow-button-primary transition-all duration-100 hover:bg-orangeHover active:bg-orange"
122 |                 @click="updateVolume([volume.min, volume.max])"
123 |               >
124 |                 应用
125 |               </button>
126 |             </div>
127 |           </div>
128 |         </div>
129 | 
130 |         <a
131 |           type="button"
132 |           class="flex w-full min-w-max flex-row items-center justify-center space-x-2 rounded-lg bg-medium-blue py-2 px-3 text-sm font-semibold text-white shadow-button-secondary transition-all duration-100 hover:bg-medium-blueHover active:bg-medium-blue sm:w-fit sm:px-5 sm:text-base cursor-pointer"
133 |           @click="exportProcessedData"
134 |         >
135 |           <span>Export Excel</span>
136 |         </a>
137 |       </div>
138 |       <table class="min-w-full bg-medium-blue rounded-lg overflow-hidden">
139 |         <thead>
140 |           <tr>
141 |             <th class="py-4 px-4 text-medium bg-dark-medium-blue text-white text-left">Keyword</th>
142 |             <th class="py-4 px-8 text-medium bg-dark-medium-blue text-white text-center">Volume</th>
143 |             <th class="py-4 px-8 text-medium bg-dark-medium-blue text-white text-center">KD</th>
144 |             <th class="py-4 px-8 text-medium bg-dark-medium-blue text-white text-center">CPC</th>
145 |             <th class="py-4 px-8 text-medium bg-dark-medium-blue text-white text-center">
146 |               优化回报率
147 |             </th>
148 |           </tr>
149 |         </thead>
150 |         <tbody>
151 |           <tr
152 |             v-for="(item, index) in processedArr"
153 |             :key="index"
154 |             :class="{ 'bg-dark-medium-blue': index % 2 === 1 }"
155 |           >
156 |             <td
157 |               class="py-4 px-4 text-medium text-origin text-left break-words whitespace-normal max-w-xs overflow-auto"
158 |             >
159 |               <a class="underline" :href="item.url" target="_blank">{{ item.keyword }}</a>
160 |             </td>
161 |             <td class="py-4 px-8 text-medium text-white text-center">
162 |               {{ item.volume }}
163 |             </td>
164 |             <td class="py-4 px-8 text-medium text-white text-center">
165 |               {{ item.kd }}
166 |             </td>
167 |             <td class="py-4 px-8 text-medium text-white text-center">
168 |               {{ item.cpc }}
169 |             </td>
170 |             <td class="py-4 px-8 text-medium text-orange text-center font-bold">
171 |               {{ item.roi }}
172 |             </td>
173 |           </tr>
174 |         </tbody>
175 |       </table>
176 |     </div>
177 |   </div>
178 | </template>
179 | 
180 | <script>
181 | import * as XLSX from 'xlsx'
182 | import { saveAs } from 'file-saver'
183 | 
184 | export default {
185 |   data() {
186 |     return {
187 |       originalArr: [],
188 |       processedArr: [],
189 | 
190 |       kd: {
191 |         visible: false,
192 |         values: [],
193 |         selections: [
194 |           [85, 100],
195 |           [70, 84],
196 |           [50, 69],
197 |           [30, 49],
198 |           [15, 29],
199 |           [0, 14]
200 |         ],
201 |         min: '',
202 |         max: ''
203 |       },
204 | 
205 |       volume: {
206 |         visible: false,
207 |         values: [],
208 |         selections: [
209 |           [100001, 99999999],
210 |           [10001, 100000],
211 |           [1001, 10000],
212 |           [101, 1000],
213 |           [11, 100],
214 |           [1, 10]
215 |         ],
216 |         min: '',
217 |         max: ''
218 |       }
219 |     }
220 |   },
221 | 
222 |   methods: {
223 |     processData(jsonData) {
224 |       this.processedArr = []
225 | 
226 |       jsonData.forEach((item) => {
227 |         if (item['Keyword Difficulty'] !== 0) {
228 |           item.roi = (item.Volume * item['CPC (USD)']) / item['Keyword Difficulty']
229 |         }
230 | 
231 |         if (item.roi > 0) {
232 |           this.originalArr.push({
233 |             keyword: item.Keyword,
234 |             volume: item.Volume,
235 |             kd: item['Keyword Difficulty'],
236 |             cpc: item['CPC (USD)'],
237 |             roi: item.roi.toFixed(2),
238 |             url: 'https://www.google.com/search?q=' + item.Keyword
239 |           })
240 |         }
241 |       })
242 | 
243 |       this.originalArr.sort((a, b) => b.roi - a.roi)
244 | 
245 |       this.filterOriginalArr()
246 |     },
247 | 
248 |     updateKd(rangeArr) {
249 |       rangeArr = this.adjustRangeArr(rangeArr, 0, 100)
250 | 
251 |       this.kd.values = rangeArr
252 |       this.kd.visible = false
253 | 
254 |       this.filterOriginalArr()
255 |     },
256 | 
257 |     updateVolume(rangeArr) {
258 |       rangeArr = this.adjustRangeArr(rangeArr, 0, 99999999)
259 | 
260 |       this.volume.values = rangeArr
261 |       this.volume.visible = false
262 | 
263 |       this.filterOriginalArr()
264 |     },
265 | 
266 |     adjustRangeArr(rangeArr, minValue, maxValue) {
267 |       if (rangeArr.length) {
268 |         rangeArr[0] = parseInt(rangeArr[0] || minValue)
269 |         rangeArr[1] = parseInt(rangeArr[1] || maxValue)
270 |         if (rangeArr[0] > rangeArr[1]) rangeArr = [rangeArr[1], rangeArr[0]]
271 |       }
272 | 
273 |       return rangeArr
274 |     },
275 | 
276 |     filterOriginalArr() {
277 |       const kdValuesLength = this.kd.values.length
278 |       const volumeValuesLength = this.volume.values.length
279 | 
280 |       this.processedArr = this.originalArr.filter((item) => {
281 |         let kdCondition = true
282 |         let volumeCondition = true
283 | 
284 |         if (kdValuesLength) {
285 |           kdCondition = item.kd >= this.kd.values[0] && item.kd <= this.kd.values[1]
286 |         }
287 | 
288 |         if (volumeValuesLength) {
289 |           volumeCondition =
290 |             item.volume >= this.volume.values[0] && item.volume <= this.volume.values[1]
291 |         }
292 | 
293 |         return kdCondition && volumeCondition
294 |       })
295 |     },
296 | 
297 |     exportProcessedData() {
298 |       // 创建一个新的工作簿对象
299 |       const wb = XLSX.utils.book_new()
300 | 
301 |       // 将处理后的数据转换为一个工作表对象
302 |       const ws = XLSX.utils.json_to_sheet(this.processedArr)
303 | 
304 |       // 将工作表对象添加到工作簿中
305 |       XLSX.utils.book_append_sheet(wb, ws, 'Processed Data')
306 | 
307 |       // 将工作簿对象写入一个二进制字符串
308 |       const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })
309 | 
310 |       // 使用 file-saver 库保存文件
311 |       saveAs(
312 |         new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' }),
313 |         'processed-data.xlsx'
314 |       )
315 |     },
316 | 
317 |     // 定义一个将二进制字符串转换为数组缓冲区的函数
318 |     s2ab(s) {
319 |       const buf = new ArrayBuffer(s.length)
320 |       const view = new Uint8Array(buf)
321 |       for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff
322 |       return buf
323 |     }
324 |   }
325 | }
326 | </script>
327 | 


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