feat: eslint

Author: ulleo

frontend/.eslintignore

@@ -0,0 +1,6 @@
+{
+  "globals": {
+    "ElMessage": true,
+    "ElMessageBox": true
+  }
+}

frontend/.eslintrc-auto-import.json

@@ -5,11 +5,13 @@ const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommen
 const eslintPluginVue = require('eslint-plugin-vue')
 const globals = require('globals')
 const typescriptEslint = require('typescript-eslint')
+const eslintrcImport = require('./.eslintrc-auto-import.json')
+
 
 module.exports = typescriptEslint.config(
   {
     languageOptions: {
-      globals: globals.browser,
+      globals: { ...globals.browser, ...globals.node, ...eslintrcImport.globals },
       ecmaVersion: 'latest',
       parserOptions: {
         parser: typescriptEslint.parser,
@@ -47,13 +49,12 @@ module.exports = typescriptEslint.config(
     'dist/',
     'public/',
     'eslint.config.cjs',
-    '.eslintrc.js',
     '**/*.md',
     '**/*.woff',
     '**/*.ttf',
     '**/.vscode/',
     '**/.DS_Store',
   ]),
   eslintConfigPrettier,
-  eslintPluginPrettierRecommended
+  eslintPluginPrettierRecommended,
 )

frontend/.eslintrc.js

@@ -29,6 +29,7 @@
     "snowflake-id": "^1.1.0",
     "tinymce": "^5.8.2",
     "vue": "^3.5.13",
+    "vue-dompurify-html": "^5.3.0",
     "vue-i18n": "^9.14.4",
     "vue-router": "^4.5.0",
     "web-storage-cache": "^1.1.1"

frontend/eslint.config.cjs

@@ -29,10 +29,10 @@ const svgClass = computed(() => {
 <template>
   <div
     v-if="staticContent"
+    v-dompurify-html="staticContent"
     class="svg-container"
     :class="svgClass"
     aria-hidden="true"
-    v-html="staticContent"
   ></div>
   <slot v-else />
 </template>

frontend/package.json

@@ -4,11 +4,14 @@ import './style.less'
 import App from './App.vue'
 import router from './router'
 import { i18n } from './i18n'
+import VueDOMPurifyHTML from 'vue-dompurify-html'
+
 // import 'element-plus/dist/index.css'
 const app = createApp(App)
 const pinia = createPinia()
 
 app.use(pinia)
 app.use(router)
 app.use(i18n)
+app.use(VueDOMPurifyHTML)
 app.mount('#app')

frontend/src/components/icon-custom/src/Icon.vue

@@ -215,12 +215,12 @@ function onTypeChange() {
             <div>
               <template v-if="message.record.sql_answer">
                 <div>SQL Generation:</div>
-                <div v-if="message.record.sql_answer" v-html="renderSqlThinking"></div>
+                <div v-if="message.record.sql_answer" v-dompurify-html="renderSqlThinking"></div>
               </template>
               <template v-if="message.record.chart_answer">
                 <el-divider></el-divider>
                 <div>Chart Generation:</div>
-                <div v-html="renderChartThinking"></div>
+                <div v-dompurify-html="renderChartThinking"></div>
               </template>
             </div>
           </el-collapse-item>

frontend/src/main.ts

@@ -11,7 +11,7 @@ defineProps<{
     <div class="chat-block">
       <slot>
         <div class="chat-block-content">
-          <div v-html="msg?.content"></div>
+          <div v-dompurify-html="msg?.content"></div>
         </div>
       </slot>
     </div>

frontend/src/views/chat/ChatAnswer.vue

@@ -341,17 +341,6 @@ const sendMessage = async () => {
   }
 }
 
-//@ts-ignore
-const formatMessage = (content: string) => {
-  if (!content) return ''
-  return content
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/\n/g, '<br>')
-    .replace(/ {2}/g, '&nbsp;&nbsp;')
-}
-
 const handleCtrlEnter = (e: KeyboardEvent) => {
   const textarea = e.target as HTMLTextAreaElement
   const start = textarea.selectionStart