123

.env.development

@@ -0,0 +1,38 @@
+# 开发环境配置
+ENV='development'
+
+# 开发环境打包路径
+VUE_APP_BASE='./'
+# VUE_APP_ROUTER_BASE='/bigScreen/monitorWarn/'
+VUE_APP_ROUTER_BASE = '/industry-12101'
+# 
+# 开发环境publicPath
+VUE_ROUTER_BASE = '/industry-12101'
+
+# 开发环境输出目录
+VUE_APP_OUTPUTDIR = 'dist'
+
+# 开发环境后端接口前缀
+VUE_APP_BASE_API = '/api'
+VUE_APP_BASE_SERVER_API = '/apiserver'
+VUE_APP_ANALYSIS = '/video-forestry-analysis'
+VUE_APP_EMERGENCY = '/video-forestry-emengercy'
+VUE_APP_BISS = '/video-forestry-biss'
+VUE_APP_BASESERVICE = '/video-forestry-baseservice'
+VUE_APP_BASE_IMG = '/common-img-url'
+VUE_APP_BASE_GEOSERVER = '/geoserver'
+
+# 后端访问路径
+VUE_APP_SERVICE_URL = 'http://120.46.149.139:9091/'
+VUE_APP_FORESTRY_SERVICE_URL = 'http://120.46.149.139:18080/'
+VUE_APP_BASE_IMG_URL = 'https://powerexchange-fs.obs.cn-north-4.myhuaweicloud.com:443/'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+VUE_APP_ALLOW_URL = 'http://120.46.149.139:9091/,http://117.78.2.139:9091/,https://s.chinatowercom.cn:81/,https://sl.chinatowercom.cn:81/,http://s.chinatowercom.cn:81/,https://s.chinatowercom.cn/,https://sl.chinatowercom.cn/,http://119.3.189.197:9998/,http://127.0.0.1:9999/,http://localhost:9999/,http://117.78.2.139/,http://124.70.97.97:18082/,'
+#主工程地址
+VUE_APP_IFRAME_PARENT_URL = 'http://120.46.149.139:9091/'
+#林业域名地址
+VUE_APP_PLAT_URL = 'http://slwyytest.tower0788.cn/'
+
+VUE_APP_GIS_RESOURCE_API = 'http://120.46.149.139:9091/api'

.env.production

@@ -0,0 +1,49 @@
+
+# 其他生产环境变量
+NODE_ENV = ‘production’
+
+###
+ # @Author: 米亚流年 miyaliunian@gmail.com
+ # @Date: 2024-03-14 10:58:56
+ # @LastEditors: 米亚流年 miyaliunian@gmail.com
+ # @LastEditTime: 2024-03-29 15:30:47
+ # @FilePath: /remote-runtime/.env.production
+ # @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+###
+# 生产环境配置
+ENV = 'production'
+
+# 生产环境打包路径
+VUE_APP_BASE= './'
+VUE_APP_ROUTER_BASE = '/industry-18099'
+
+# 生产环境publicPath
+VUE_ROUTER_BASE = '/industry-18099'
+
+# 生产环境输出目录
+VUE_APP_OUTPUTDIR = 'dist'
+
+# 生产环境后端接口前缀
+VUE_APP_BASE_API = '/api'
+VUE_APP_BASE_SERVER_API = '/apiserver'
+VUE_APP_ANALYSIS = '/video-forestry-analysis'
+VUE_APP_EMERGENCY = '/video-forestry-emengercy'
+VUE_APP_BISS = '/video-forestry-biss'
+VUE_APP_BASESERVICE = '/video-forestry-baseservice'
+VUE_APP_BASE_IMG = '/common-img-url'
+VUE_APP_BASE_GEOSERVER = '/geoserver'
+
+# 后端访问路径
+VUE_APP_SERVICE_URL = 'http://120.46.149.139:9091/'
+VUE_APP_FORESTRY_SERVICE_URL = 'http://120.46.149.139:18080/'
+VUE_APP_BASE_IMG_URL = 'https://powerexchange-fs.obs.cn-north-4.myhuaweicloud.com:443/'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+VUE_APP_ALLOW_URL = 'http://120.46.149.139:9091/,http://117.78.2.139:9091/,https://s.chinatowercom.cn:81/,https://sl.chinatowercom.cn:81/,http://s.chinatowercom.cn:81/,https://s.chinatowercom.cn/,https://sl.chinatowercom.cn/,http://119.3.189.197:9998/,http://127.0.0.1:9999/,http://localhost:9999/,http://117.78.2.139/,http://124.70.97.97:18082/,'
+#主工程地址
+VUE_APP_IFRAME_PARENT_URL = 'http://120.46.149.139:9091/'
+#林业域名地址
+VUE_APP_PLAT_URL = 'http://slwyytest.tower0788.cn/'
+
+VUE_APP_GIS_RESOURCE_API = 'http://120.46.149.139:9091/api'

.eslintignore

@@ -0,0 +1,10 @@
+# 忽略build目录下类型为js的文件的语法检查
+build/*.js
+# 忽略src/assets目录下文件的语法检查
+src/assets
+# 忽略public目录下文件的语法检查
+public
+# 忽略当前目录下为js的文件的语法检查
+*.js
+# 忽略当前目录下为vue的文件的语法检查
+# *.vue

.eslintrc.js

@@ -0,0 +1,201 @@
+// ESlint 检查配置
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/attribute-hyphenation": 'off',
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1,
+      "ignoredNodes": ["TemplateLiteral"]
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}

.gitignore

@@ -0,0 +1,100 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Node modules
+node_modules/
+.pnpm-store/
+
+# Build output
+dist/
+dist-ssr/
+build/
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea/
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Cache
+.cache/
+.temp/
+.tmp/
+
+# OS
+Thumbs.db
+.DS_Store
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Testing
+coverage/
+.nyc_output/
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Dependency directories
+jspm_packages/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# Webpack
+.webpack/
+.webpack_cache/
+
+ 
+package-lock.json

.npmrc

@@ -0,0 +1,15 @@
+registry=https://registry.npmmirror.com/
+@ct:registry=http://10.38.77.5:8081/repository/npm-public/
+sass_binary_site=https://npmmirror.com/mirrors/node-sass/
+phantomjs_cdnurl=https://npmmirror.com/mirrors/phantomjs/
+electron_mirror=https://npmmirror.com/mirrors/electron/
+sqlite3_binary_host_mirror=https://npmmirror.com/mirrors/
+profiler_binary_host_mirror=https://npmmirror.com/mirrors/node-inspector/
+chromedriver_cdnurl=https://npmmirror.com/mirrors/chromedriver/
+operadriver_cdnurl=https://npmmirror.com/mirrors/operadriver/
+fse_binary_host_mirror=https://npmmirror.com/mirrors/fsevents/
+network-timeout=300000
+fetch-retries=5
+fetch-retry-factor=10
+fetch-retry-mintimeout=10000
+fetch-retry-maxtimeout=60000

.prettierrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: true,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: 'avoid',
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  requirePragma: false,
+  insertPragma: false,
+  proseWrap: 'preserve',
+  htmlWhitespaceSensitivity: 'css',
+  vueIndentScriptAndStyle: false,
+  endOfLine: 'lf',
+  embeddedLanguageFormatting: 'auto',
+  singleAttributePerLine: false
+} 

.stylelintrc.js

@@ -0,0 +1,123 @@
+module.exports = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-standard-scss',
+    'stylelint-config-standard-vue',
+    'stylelint-config-prettier-scss'
+  ],
+  plugins: [
+    'stylelint-order',
+    'stylelint-scss'
+  ],
+  rules: {
+    'no-empty-source': null,
+    'selector-class-pattern': null,
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: ['v-deep']
+      }
+    ],
+    'function-no-unknown': [
+      true,
+      {
+        ignoreFunctions: ['map-get', 'map-has-key']
+      }
+    ],
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'mixin',
+          'include',
+          'function',
+          'if',
+          'else',
+          'return',
+          'each',
+          'for',
+          'while'
+        ]
+      }
+    ],
+    'order/properties-order': [
+      'position',
+      'top',
+      'right',
+      'bottom',
+      'left',
+      'z-index',
+      'display',
+      'float',
+      'width',
+      'height',
+      'max-width',
+      'max-height',
+      'min-width',
+      'min-height',
+      'padding',
+      'padding-top',
+      'padding-right',
+      'padding-bottom',
+      'padding-left',
+      'margin',
+      'margin-top',
+      'margin-right',
+      'margin-bottom',
+      'margin-left',
+      'margin-collapse',
+      'margin-top-collapse',
+      'margin-right-collapse',
+      'margin-bottom-collapse',
+      'margin-left-collapse',
+      'overflow',
+      'overflow-x',
+      'overflow-y',
+      'clip',
+      'clear',
+      'font',
+      'font-family',
+      'font-size',
+      'font-smoothing',
+      'osx-font-smoothing',
+      'font-style',
+      'font-weight',
+      'line-height',
+      'letter-spacing',
+      'word-spacing',
+      'color',
+      'text-align',
+      'text-decoration',
+      'text-indent',
+      'text-overflow',
+      'text-rendering',
+      'text-size-adjust',
+      'text-shadow',
+      'text-transform',
+      'word-break',
+      'word-wrap',
+      'white-space',
+      'vertical-align',
+      'list-style',
+      'list-style-type',
+      'list-style-position',
+      'list-style-image',
+      'pointer-events',
+      'cursor',
+      'background',
+      'background-color',
+      'border',
+      'border-radius',
+      'content',
+      'outline',
+      'outline-offset',
+      'opacity',
+      'filter',
+      'visibility',
+      'size',
+      'transform',
+      'transition',
+      'animation'
+    ]
+  }
+} 

Dockerfile

@@ -0,0 +1,19 @@
+#基于nginx镜像
+# FROM nginx-hide-versions
+# FROM centos7.2-nginx1.22.0:base-1.1
+FROM nginx:1.29.0
+#从dockerhub拉取nginx镜像
+# FROM registry-1.docker.io/library/nginx:1.22.1 
+
+
+#将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
+# RUN  rm -rf /usr/share/nginx/html/dist
+COPY dist/ /usr/share/nginx/html/industry-18099
+# COPY dist/index.html /usr/share/nginx/html/index.html
+
+#用本地的 nginx.conf 配置来替换nginx镜像里的默认配置
+# COPY nginx.conf /usr/local/nginx/conf/nginx.conf
+COPY nginx.conf /etc/nginx/nginx.conf
+
+RUN chmod 777 -R /usr/share/nginx/html/
+RUN chmod 777 -R /etc/nginx/nginx.conf

PERFORMANCE.md

@@ -0,0 +1,264 @@
+# 🚀 性能优化指南
+
+本项目已经集成了多种性能优化策略，以提升应用的加载速度和运行性能。
+
+## 📊 已实施的优化
+
+### 1. **代码分割优化**
+- ✅ 按功能模块分割代码
+- ✅ 合理控制chunk数量（从66个减少到33个）
+- ✅ 优化首页加载文件数（从29个减少到16个）
+- ✅ 平衡文件大小与请求数量
+
+### 2. **资源预加载**
+- ✅ 关键资源预加载（preload）
+- ✅ 异步资源预获取（prefetch）
+- ✅ 字体文件预加载
+- ✅ 优化资源加载优先级
+
+### 3. **压缩优化**
+- ✅ Gzip压缩（8KB以上文件）
+- ✅ Brotli压缩（更好的压缩率）
+- ✅ CSS/JS代码压缩
+- ✅ HTML模板压缩
+
+### 4. **缓存策略**
+- ✅ 文件系统缓存（提升重新构建速度）
+- ✅ 长期缓存（7天有效期）
+- ✅ 构建依赖缓存
+- ✅ 内容hash命名
+
+### 5. **图片优化**
+- ✅ 小图片内联（4KB以下转base64）
+- ✅ 图片格式优化支持
+- ✅ 响应式图片配置
+- ✅ 图片压缩策略
+
+### 6. **开发体验优化**
+- ✅ 热模块替换（HMR）
+- ✅ 开发服务器优化
+- ✅ 错误提示优化
+- ✅ 构建进度显示
+
+## 🔧 使用方法
+
+### 基本命令
+```bash
+# 开发环境（已优化）
+npm run dev
+
+# 生产构建（已优化）
+npm run build
+
+# 性能分析
+npm run analyze
+
+# 完整性能测试
+npm run performance
+```
+
+### 性能分析
+
+#### 1. 安装分析工具
+```bash
+npm run analyze:install
+```
+
+#### 2. 运行分析
+```bash
+npm run analyze
+```
+
+这将生成：
+- `bundle-report.html` - 可视化打包分析
+- `bundle-stats.json` - 详细统计数据
+- `performance-report.md` - 性能报告
+
+#### 3. 查看报告
+分析完成后会自动打开浏览器显示可视化报告。
+
+## 📈 性能监控
+
+### 关键指标
+- **总JS文件大小**: 目标 < 10MB
+- **首页加载文件数**: 目标 < 20个
+- **最大单文件大小**: 目标 < 2MB
+- **Gzip压缩率**: 目标 > 70%
+
+### 性能预算
+```javascript
+// webpack.config.js 中的性能预算
+performance: {
+  maxAssetSize: 2000000, // 2MB
+  maxEntrypointSize: 2000000, // 2MB
+  hints: 'warning'
+}
+```
+
+## 🎯 进一步优化建议
+
+### 1. **代码层面**
+```javascript
+// 使用动态导入
+const LazyComponent = () => import('@/components/LazyComponent.vue')
+
+// 路由懒加载
+const routes = [
+  {
+    path: '/lazy',
+    component: () => import('@/views/LazyView.vue')
+  }
+]
+```
+
+### 2. **组件优化**
+```vue
+<template>
+  <div>
+    <!-- 使用v-show代替v-if（频繁切换） -->
+    <div v-show="visible">Content</div>
+    
+    <!-- 长列表虚拟滚动 -->
+    <virtual-list :items="items" />
+  </div>
+</template>
+
+<script>
+export default {
+  // 组件缓存
+  keep-alive: true,
+  
+  // 异步组件
+  components: {
+    AsyncComponent: () => import('./AsyncComponent.vue')
+  }
+}
+</script>
+```
+
+### 3. **图片优化**
+```html
+<!-- 使用WebP格式 -->
+<picture>
+  <source srcset="image.webp" type="image/webp">
+  <img src="image.jpg" alt="description">
+</picture>
+
+<!-- 响应式图片 -->
+<img 
+  src="image-320.jpg" 
+  srcset="image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w"
+  sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1280px"
+  alt="description"
+>
+```
+
+### 4. **服务端优化**
+```nginx
+# Nginx配置示例
+server {
+    # 启用Gzip
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript;
+    
+    # 启用Brotli
+    brotli on;
+    brotli_types text/plain text/css application/json application/javascript;
+    
+    # 缓存静态资源
+    location ~* \.(js|css|png|jpg|jpeg|gif|svg|woff|woff2)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}
+```
+
+## 🛠️ 性能配置文件
+
+项目包含 `performance.config.js` 配置文件，可以调整各种性能参数：
+
+```javascript
+// performance.config.js
+module.exports = {
+  // 预加载策略
+  preload: {
+    critical: ['vue-vendor', 'element-ui', 'main'],
+    prefetch: true
+  },
+  
+  // 代码分割
+  splitChunks: {
+    maxInitialRequests: 6,
+    minSize: 100000,
+    maxSize: 8000000
+  },
+  
+  // 压缩配置
+  compression: {
+    gzip: { threshold: 8192 },
+    brotli: { threshold: 8192, level: 11 }
+  }
+}
+```
+
+## 🔍 性能测试
+
+### 1. **Lighthouse测试**
+```bash
+# 安装Lighthouse
+npm install -g lighthouse
+
+# 运行测试
+lighthouse http://localhost:3000 --output html --output-path ./lighthouse-report.html
+```
+
+### 2. **Bundle分析**
+```bash
+# 生成分析报告
+npm run analyze
+
+# 查看具体文件大小
+npm run build -- --profile --json > stats.json
+```
+
+### 3. **网络性能测试**
+- 使用Chrome DevTools Network面板
+- 模拟不同网络条件
+- 监控资源加载时间
+
+## 📚 最佳实践
+
+### 1. **开发阶段**
+- 使用热更新提升开发效率
+- 启用source map便于调试
+- 使用ESLint和Prettier保证代码质量
+
+### 2. **构建阶段**
+- 定期运行性能分析
+- 监控bundle大小变化
+- 优化大文件和重复依赖
+
+### 3. **部署阶段**
+- 启用服务端压缩
+- 配置CDN加速
+- 设置合理的缓存策略
+
+## 🚨 注意事项
+
+1. **内存使用**: 已设置 `--max-old-space-size=8192` 避免内存溢出
+2. **并行处理**: 限制为2个并行进程，避免系统过载
+3. **缓存清理**: 定期清理 `node_modules/.cache` 目录
+4. **依赖更新**: 谨慎更新大型依赖，可能影响bundle大小
+
+## 📊 性能对比
+
+| 优化项目 | 优化前 | 优化后 | 提升 |
+|---------|-------|-------|------|
+| JS文件数量 | 66个 | 33个 | 50% ↓ |
+| 首页加载文件 | 29个 | 16个 | 45% ↓ |
+| 构建速度 | - | 缓存加速 | 30% ↑ |
+| 文件压缩 | 无 | Gzip+Brotli | 70% ↓ |
+
+---
+
+*持续优化，持续改进！* 🎯 

README.md

@@ -0,0 +1,143 @@
+# Vue2 + Webpack 项目模板
+
+基于 webpack 构建的 Vue2 现代化前端工程模板，集成了完整的开发和构建配置。
+
+## ✨ 特性
+
+- ⚡ **快速构建**: 基于 webpack，支持完整的开发和生产构建
+- 🎯 **Vue2 支持**: 完整的 Vue2 生态系统支持
+- 📦 **组件化**: 支持组件库形式的开发和发布
+- 🎨 **样式方案**: 内置 Sass/SCSS 支持，支持样式模块化
+- 🔧 **开发体验**: 热更新、代码分割、懒加载等
+- 📱 **多端适配**: 支持响应式设计，适配不同设备
+- 🛠 **工程化**: ESLint、Prettier、Git Hooks 等工程化工具
+- 🧪 **测试支持**: Jest 单元测试框架
+- 📈 **性能优化**: Tree-shaking、代码压缩、资源优化
+
+## 🏗 技术栈
+
+- **框架**: Vue 2.7.x
+- **构建工具**: webpack + webpack-dev-server
+- **语言**: JavaScript/TypeScript
+- **样式**: Sass/SCSS + PostCSS
+- **包管理**: npm/yarn/pnpm
+- **代码质量**: ESLint + Prettier
+- **测试框架**: Jest
+
+## 📁 项目结构
+
+```
+project/
+├── public/                # 静态资源
+├── src/                   # 源代码
+│   ├── assets/           # 资源文件
+│   ├── components/       # 业务组件
+│   ├── views/           # 页面组件
+│   ├── router/          # 路由配置
+│   ├── utils/           # 工具函数
+│   └── main.js          # 入口文件
+├── scripts/              # 构建脚本
+├── webpack.config.js     # webpack 配置
+├── babel.config.js       # Babel 配置
+├── package.json          # 项目配置
+└── README.md            # 项目说明
+```
+
+## 🚀 快速开始
+
+### 环境要求
+
+- Node.js >= 16.0.0
+- npm >= 8.0.0 或 yarn >= 1.22.0
+
+### 安装依赖
+
+```bash
+# 使用 npm
+npm install --legacy-peer-deps
+```
+
+### 开发启动
+
+```bash
+# 启动开发服务器
+npm run dev
+
+# 启动开发服务器（超静默模式，过滤警告）
+npm run dev:ultra-quiet
+```
+
+### 构建部署
+
+```bash
+# 生产构建
+npm run build
+
+# 预览构建结果
+npm run preview
+```
+
+## ⚙️ 配置说明
+
+### webpack 配置
+
+`webpack.config.js` 包含了完整的构建配置：
+
+- **开发服务器**: 热更新、代理配置
+- **样式处理**: Sass/SCSS 编译、PostCSS 处理
+- **资源处理**: 图片、字体等静态资源
+- **代码分割**: 动态导入、懒加载
+- **优化配置**: 代码压缩、Tree-shaking
+
+### 环境变量
+
+支持 `.env` 文件配置：
+
+```bash
+# .env.development
+VUE_APP_API_URL=http://localhost:3000/api
+
+# .env.production
+VUE_APP_API_URL=https://api.example.com
+VUE_ROUTER_BASE=/app/
+```
+
+### 路径别名
+
+内置常用路径别名：
+
+```javascript
+'@': 'src/',
+'@components': 'src/components',
+'@views': 'src/views',
+'@utils': 'src/utils',
+'@assets': 'src/assets'
+```
+
+## 🛠 技术栈详情
+
+- webpack 全家桶
+- Vue 2.7 + Vue Router
+- Element UI (可选)
+- Axios (HTTP 客户端)
+- Sass/SCSS (样式预处理)
+- ESLint + Prettier (代码规范)
+- Jest (单元测试)
+
+## 🐛 常见问题
+
+### 开发服务器启动失败
+
+检查端口是否被占用，或修改 webpack.config.js 中的端口配置。
+
+### 样式文件导入失败
+
+确保 Sass 文件正确导入，检查 webpack 配置中的 sass 设置。
+
+### 组件库引用问题
+
+确保组件库正确安装，检查 babel.config.js 中的组件库配置。
+
+## �� 许可证
+
+MIT License 

nginx.conf

@@ -0,0 +1,130 @@
+#user  nobody;
+worker_processes  1;
+
+#error_log  logs/error.log;
+#error_log  logs/error.log  notice;
+#error_log  logs/error.log  info;
+
+#pid        logs/nginx.pid;
+
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+    #                  '$status $body_bytes_sent "$http_referer" '
+    #                  '"$http_user_agent" "$http_x_forwarded_for"';
+
+    #access_log  logs/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  365;
+	server_tokens off;
+
+    #gzip  on;
+    gzip  on;
+      gzip_min_length 1k;
+      gzip_buffers 4 16k;
+      gzip_http_version 1.0;
+      gzip_comp_level 6;
+      gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
+      gzip_vary on;
+
+    server {
+        listen       12101 default_server;
+        server_name  localhost;
+        client_max_body_size 100M;
+		fastcgi_intercept_errors on;
+		error_page 403 /custom_403.html; #鑷畾涔夐敊璇〉闈?uri
+		location = /custom_403.html {
+			ssi on;  # 浣縣tml鏀寔璇诲彇鍙橀噺
+			ssi_silent_errors on;  # 榛樿鍊兼槸off锛屽紑鍚悗鍦ㄥ鐞哠SI鏂囦欢鍑洪敊鏃朵笉杈撳嚭閿欒鎻愮ず
+			add_header Content-Type 'text/html';
+			add_header X-Frame-Options 'SAMEORIGIN';
+			return 403 '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
+			<html>
+			<head><title>403 Forbidden</title></head>
+			<body>
+			<center><h1>403 Forbidden</h1></center>
+			</body>
+			</html>';
+		}
+
+        location / {
+            gzip  on;
+            gzip_min_length 1k;
+            gzip_buffers 4 16k;
+            gzip_http_version 1.0;
+            gzip_comp_level 2;
+            gzip_types text/plain application/javascript application/x-javascript  text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
+            gzip_vary on;
+	        # root /usr/share/nginx/html/;
+	        root /usr/share/nginx/html/industry-18099;
+            # 鐢ㄤ簬閰嶅悎 browserHistory 浣跨敤
+            try_files $uri $uri/ /index.html;
+            index  index.html index.htm;
+        }
+        location ~/industry-18099/ {
+            gzip  on;
+            gzip_min_length 1k;
+            gzip_buffers 4 16k;
+            gzip_http_version 1.0;
+            gzip_comp_level 2;
+            gzip_types text/plain application/javascript application/x-javascript  text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
+            gzip_vary on;
+	          root /usr/share/nginx/html;
+            # 鐢ㄤ簬閰嶅悎 browserHistory 浣跨敤
+            try_files $uri $uri/ /index.html;
+            index  index.html index.htm;
+        }
+        location /api/ {
+            add_header 'Access-Control-Allow-Origin' $http_origin;
+	        add_header 'Access-Control-Allow-Headers' "*"; 
+	        add_header 'Access-Control-Allow-Credentials' 'true';
+	        add_header 'Access-Control-Allow-Methods' 'GET,POST';
+            if ($request_uri ~* "captchaImage") {
+            	add_header 'Access-Control-Allow-Origin' 'http://10.38.26.119';
+            }
+            
+	        if ($request_method = OPTIONS) {
+		        add_header 'Access-Control-Allow-Origin' '*';
+		        add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE,PATCH';
+                add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Referer,X-Frame-Options';
+		        add_header 'Access-Control-Max-Age' 1728000;
+		        add_header 'Content-Type' 'text/plain charset=UTF-8';
+		        add_header 'Content-Length' 0;
+    		    return 204;
+	        }
+            proxy_pass http://10.38.26.119:18080/;     #  edit test
+            proxy_set_header   X-Real-IP         $remote_addr;
+            proxy_set_header   Host              $http_host;
+            proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
+            proxy_read_timeout 600;
+        }
+        location ^~ /preview/ {
+            add_header 'Access-Control-Allow-Origin' "$http_origin" always;
+            add_header 'Access-Control-Allow-Credentials' 'true' always;
+            add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
+            add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-  Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
+            proxy_pass  https://video-platform.obs.cn-north-4.myhuaweicloud.com/;
+        }
+        location /apiserver/ {                                                                                                                                                                                                  
+            add_header 'Access-Control-Allow-Origin' "$http_origin" always;                                                                                                                                                      
+            add_header 'Access-Control-Allow-Credentials' 'true';                                                  
+            add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';                                          
+            proxy_pass http://10.38.26.119/api/;     # M-gM-=M-^QM-eM-^EM-3M-eM-^FM-^EM-gM-=M-^QM-eM-^\M-0M-eM-^]M-^@M-gM-+M-/M-eM-^OM-#                                                                                            
+            proxy_set_header   X-Real-IP         $remote_addr;                                                     
+            proxy_set_header   Host              $http_host;                                                      
+            proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;                                      
+            proxy_read_timeout 600;                                                                               
+        }
+    }
+}

package.json

@@ -0,0 +1,188 @@
+{
+  "name": "component-source-develop-template",
+  "version": "1.0.0",
+  "description": "Vue2 项目基于 webpack 构建",
+  "main": "src/main.js",
+  "scripts": {
+    "dev": "node --max-old-space-size=8192 scripts/dev.js",
+    "dev:simple": "webpack serve --config webpack.config.js",
+    "dev:direct": "cross-env NODE_ENV=development webpack serve --config webpack.config.js --host 0.0.0.0 --port 3000",
+    "dev:ultra-quiet": "node scripts/dev.js --ultra-quiet",
+    "build-zzf": "cross-env NODE_ENV=production node --max-old-space-size=8192 node_modules/webpack/bin/webpack.js --mode production",
+    "build": "cross-env NODE_ENV=production npx --node-options=\"--max-old-space-size=8192\" webpack --mode production",
+    "build:analyze": "cross-env NODE_ENV=production BUNDLE_ANALYZE=true webpack --config webpack.config.js",
+    "analyze": "node scripts/analyze.js",
+    "analyze:install": "npm install --save-dev webpack-bundle-analyzer",
+    "preview": "npm run build && npx serve dist",
+    "performance": "npm run build && npm run analyze",
+    "lint": "eslint src --ext .js,.vue --fix",
+    "lint:style": "stylelint 'src/**/*.{vue,scss,css}' --fix",
+    "format": "prettier --write 'src/**/*.{js,vue,scss,css,html}'",
+    "commit": "git-cz"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "overrides": {
+    "webworkify-webpack": "^2.1.5"
+  },
+  "dependencies": {
+    "@ct/audio-stream": "^1.0.0",
+    "@ct/component-gallery-intelligent-middle": "1.0.8",
+    "@ct/component-gallery-theme-chalk": "^1.0.20",
+    "@ct/component-gallery-video-player-listener": "1.7.10",
+    "@ct/ct_map_ol": "3.6.11",
+    "@ct/icons-v2": "^1.2.43",
+    "@ct/iframe-connect-sdk": "1.0.18",
+    "@ct/remote-page-loader": "^1.0.15",
+    "@ct/remote-page-sync-loader": "^0.0.1",
+    "@ct/shout-stream": "1.0.8",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@riophae/vue-treeselect": "0.4.0",
+    "@vue/composition-api": "^1.7.2",
+    "@wchbrad/vue-easy-tree": "^1.0.12",
+    "artplayer": "^5.1.7",
+    "axios": "^1.9.0",
+    "classnames": "^2.5.1",
+    "color-string": "^1.9.1",
+    "crypto-js": "^4.2.0",
+    "date-fns": "1.30.1",
+    "dayjs": "^1.11.13",
+    "docx-preview": "0.3.0",
+    "echarts": "5.5.0",
+    "element-resize-detector": "^1.2.4",
+    "element-ui": "^2.15.14",
+    "fabric": "^4.5.1",
+    "file-loader": "^6.2.0",
+    "file-saver": "^2.0.2",
+    "g": "^2.0.1",
+    "g711": "^1.0.1",
+    "hls.js": "1.6.0-beta.1",
+    "immer": "^10.0.3",
+    "jquery": "^3.7.1",
+    "jsts": "2.3.0",
+    "jszip": "^3.10.1",
+    "lodash-es": "^4.17.21",
+    "marked": "^14.1.2",
+    "moment": "^2.30.1",
+    "mpegts.js": "^1.7.3",
+    "node-polyfill-webpack-plugin": "^3.0.0",
+    "pinyin-pro": "^3.20.4",
+    "popper.js": "^1.16.1",
+    "screenfull": "^4.2.0",
+    "socket.io-client": "4.8.0",
+    "util": "^0.12.5",
+    "uuid": "^10.0.0",
+    "vue": "^2.7.16",
+    "vue-amap": "0.5.10",
+    "vue-clipboard2": "^0.3.3",
+    "vue-resizable": "^1.1.3",
+    "vue-router": "^3.6.5",
+    "vue-video-player": "5.0.2",
+    "vuedraggable": "^2.24.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.7",
+    "@babel/eslint-parser": "^7.12.16",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.26.0",
+    "@changesets/cli": "^2.27.11",
+    "@commitlint/cli": "~17.0.3",
+    "@commitlint/config-conventional": "~17.0.3",
+    "@ls-lint/ls-lint": "~1.11.2",
+    "@types/node": "^22.15.1",
+    "@types/sass": "1.45.0",
+    "@typescript-eslint/eslint-plugin": "~5.51.0",
+    "@typescript-eslint/parser": "^6.19.1",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "~10.0.0",
+    "@vue/preload-webpack-plugin": "^2.0.0",
+    "@vue/vue2-jest": "^29.2.6",
+    "async-validator": "^4.2.5",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.2.1",
+    "babel-plugin-component": "^1.1.1",
+    "babel-plugin-import": "^1.13.8",
+    "buffer": "^6.0.3",
+    "chalk": "^4.1.0",
+    "code-inspector-plugin": "^0.16.1",
+    "compression-webpack-plugin": "^11.1.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "core-js": "^3.8.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "~8.3.0",
+    "eslint-plugin-prettier": "~4.0.0",
+    "eslint-plugin-vue": "~8.7.1",
+    "globby": "^11.1.0",
+    "html-webpack-plugin": "^5.6.3",
+    "jest": "^29.7.0",
+    "lint-staged": "~12.5.0",
+    "mediainfo.js": "^0.3.3",
+    "mini-css-extract-plugin": "^2.9.2",
+    "mp4box": "^0.5.3",
+    "ora": "^5.1.0",
+    "path-browserify": "^1.0.1",
+    "postcss": "^8.5.1",
+    "postcss-html": "^1.6.0",
+    "postcss-loader": "^8.1.1",
+    "postcss-pxtorem": "^6.1.0",
+    "postcss-scss": "^4.0.9",
+    "postcss-url": "^10.1.3",
+    "prettier": "~2.7.1",
+    "process": "^0.11.10",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.81.0",
+    "sass-loader": "^16.0.3",
+    "script-ext-html-webpack-plugin": "^2.1.5",
+    "shelljs": "^0.8.4",
+    "style-loader": "^4.0.0",
+    "stylelint": "16.2.0",
+    "stylelint-config-prettier-scss": "^1.0.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-config-standard-vue": "^1.0.0",
+    "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.1.0",
+    "sucrase": "^3.35.0",
+    "terser-webpack-plugin": "^5.3.11",
+    "throttle-debounce": "1.0.1",
+    "typescript": "5.5.4",
+    "url-loader": "^4.1.1",
+    "vue-jest": "^3.0.7",
+    "vue-loader": "^15.11.1",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.7.16",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "jest": {
+    "transform": {
+      "^.+\\.vue$": "@vue/vue2-jest",
+      "^.+\\.js$": "babel-jest"
+    },
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "testMatch": [
+      "**/tests/**/*.spec.js"
+    ],
+    "testURL": "http://localhost/"
+  }
+}

performance.config.js

@@ -0,0 +1,114 @@
+// 性能优化配置文件
+module.exports = {
+  // 资源预加载策略
+  preload: {
+    // 关键资源预加载
+    critical: ['vue-vendor', 'element-ui', 'main'],
+    // 预获取异步资源
+    prefetch: true,
+    // 字体预加载
+    fonts: [
+      '/font/iconfont.woff2',
+      '/font/youaimoshouruifang.ttf'
+    ]
+  },
+
+  // 图片优化
+  images: {
+    // 内联阈值
+    inlineLimit: 4 * 1024, // 4KB
+    // 压缩配置
+    compression: {
+      jpeg: { quality: 85, progressive: true },
+      png: { quality: [0.65, 0.90], speed: 4 },
+      webp: { quality: 85 },
+      svg: { plugins: [{ name: 'preset-default' }] }
+    },
+    // 支持的格式
+    formats: ['webp', 'avif', 'jpg', 'png'],
+    // 响应式图片
+    responsive: {
+      sizes: [320, 640, 960, 1280, 1920],
+      formats: ['webp', 'jpg']
+    }
+  },
+
+  // 代码分割策略
+  splitChunks: {
+    strategy: 'balanced', // 平衡策略
+    maxInitialRequests: 6,
+    maxAsyncRequests: 8,
+    minSize: 100000, // 100KB
+    maxSize: 8000000, // 8MB
+    // 分包规则
+    groups: {
+      vue: { priority: 30, test: /vue|vue-router|vuex/ },
+      elementUI: { priority: 25, test: /element-ui/ },
+      largeLibs: { priority: 23, test: /echarts|artplayer|hls\.js/ },
+      utils: { priority: 21, test: /lodash|moment|axios/ },
+      ctComponents: { priority: 20, test: /@ct/ },
+      vendor: { priority: 10, test: /node_modules/ }
+    }
+  },
+
+  // 缓存策略
+  cache: {
+    type: 'filesystem',
+    maxAge: 7 * 24 * 60 * 60 * 1000, // 7天
+    compression: 'gzip',
+    buildDependencies: ['config']
+  },
+
+  // 压缩配置
+  compression: {
+    gzip: {
+      threshold: 8192, // 8KB
+      minRatio: 0.8,
+      algorithm: 'gzip'
+    },
+    brotli: {
+      threshold: 8192,
+      minRatio: 0.8,
+      level: 11
+    }
+  },
+
+  // 开发服务器优化
+  devServer: {
+    writeToDisk: false,
+    compress: true,
+    hot: true,
+    stats: 'errors-warnings'
+  },
+
+  // 构建优化
+  build: {
+    // 并行处理
+    parallel: 2,
+    // 生产环境优化
+    production: {
+      dropConsole: true,
+      dropDebugger: true,
+      minify: true,
+      extractCSS: true
+    },
+    // 开发环境优化
+    development: {
+      sourcemap: 'eval-cheap-module-source-map',
+      cache: true,
+      hmr: true
+    }
+  },
+
+  // 监控和分析
+  analyze: {
+    // 包大小分析
+    bundleAnalyzer: false,
+    // 性能预算
+    performanceBudget: {
+      maxAssetSize: 2000000, // 2MB
+      maxEntrypointSize: 2000000, // 2MB
+      hints: 'warning'
+    }
+  }
+} 

public/crossdomain.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<cross-domain-policy> 
+	<allow-access-from domain="localhost"/>
+	<allow-access-from domain="120.46.149.139"/>
+	<allow-access-from domain="117.78.2.139"/>
+	<allow-access-from domain="*.chinatowercom.cn"/>
+	<allow-access-from domain="*.tower0788.cn"/>
+</cross-domain-policy> 

public/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>中国铁塔</title>
+  <link href="<%= BASE_URL %>favicon.ico" rel="icon" />
+  <script defer="defer" src="<%= BASE_URL %>EasyPlayer-lib.min.js"></script>
+  <script defer="defer" src="<%= BASE_URL %>hrtc.min.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html> 

scripts/analyze.js

@@ -0,0 +1,180 @@
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+const webpack = require('webpack')
+const path = require('path')
+const fs = require('fs')
+
+// 获取webpack配置
+const webpackConfig = require('../webpack.config.js')
+
+// 添加分析插件
+const analyzeConfig = {
+  ...webpackConfig,
+  plugins: [
+    ...webpackConfig.plugins,
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      reportFilename: 'bundle-report.html',
+      openAnalyzer: true,
+      generateStatsFile: true,
+      statsFilename: 'bundle-stats.json',
+      statsOptions: null,
+      logLevel: 'info'
+    })
+  ]
+}
+
+// 运行分析
+console.log('🔍 开始分析打包结果...')
+
+webpack(analyzeConfig, (err, stats) => {
+  if (err) {
+    console.error('❌ 分析失败:', err)
+    return
+  }
+
+  if (stats.hasErrors()) {
+    console.error('❌ 构建过程中出现错误:')
+    stats.compilation.errors.forEach(error => {
+      console.error(error)
+    })
+    return
+  }
+
+  console.log('✅ 分析完成!')
+  console.log('📊 报告文件已生成:')
+  console.log('  - bundle-report.html (可视化报告)')
+  console.log('  - bundle-stats.json (详细统计)')
+
+  // 生成简单的性能报告
+  const statsData = stats.toJson()
+  const report = generatePerformanceReport(statsData)
+  
+  fs.writeFileSync(
+    path.join(__dirname, '../performance-report.md'),
+    report,
+    'utf8'
+  )
+  
+  console.log('  - performance-report.md (性能报告)')
+})
+
+function generatePerformanceReport(stats) {
+  const assets = stats.assets || []
+  const chunks = stats.chunks || []
+  const modules = stats.modules || []
+
+  // 按类型分组资源
+  const assetsByType = {
+    js: assets.filter(asset => asset.name.endsWith('.js')),
+    css: assets.filter(asset => asset.name.endsWith('.css')),
+    images: assets.filter(asset => /\.(png|jpg|jpeg|gif|svg|webp)$/.test(asset.name)),
+    fonts: assets.filter(asset => /\.(woff|woff2|eot|ttf|otf)$/.test(asset.name)),
+    other: assets.filter(asset => 
+      !asset.name.endsWith('.js') && 
+      !asset.name.endsWith('.css') && 
+      !/\.(png|jpg|jpeg|gif|svg|webp|woff|woff2|eot|ttf|otf)$/.test(asset.name)
+    )
+  }
+
+  // 计算总大小
+  const totalSize = assets.reduce((sum, asset) => sum + asset.size, 0)
+  const jsSize = assetsByType.js.reduce((sum, asset) => sum + asset.size, 0)
+  const cssSize = assetsByType.css.reduce((sum, asset) => sum + asset.size, 0)
+
+  // 生成报告
+  const report = `# 性能分析报告
+
+## 📊 构建统计
+
+- **总文件数**: ${assets.length}
+- **总大小**: ${formatBytes(totalSize)}
+- **JS文件**: ${assetsByType.js.length} 个，${formatBytes(jsSize)}
+- **CSS文件**: ${assetsByType.css.length} 个，${formatBytes(cssSize)}
+- **图片文件**: ${assetsByType.images.length} 个
+- **字体文件**: ${assetsByType.fonts.length} 个
+- **其他文件**: ${assetsByType.other.length} 个
+
+## 🎯 主要JS文件
+
+${assetsByType.js
+  .sort((a, b) => b.size - a.size)
+  .slice(0, 10)
+  .map(asset => `- **${asset.name}**: ${formatBytes(asset.size)}`)
+  .join('\n')}
+
+## 🎨 CSS文件
+
+${assetsByType.css
+  .sort((a, b) => b.size - a.size)
+  .map(asset => `- **${asset.name}**: ${formatBytes(asset.size)}`)
+  .join('\n')}
+
+## 📦 Chunk分析
+
+${chunks
+  .sort((a, b) => b.size - a.size)
+  .slice(0, 10)
+  .map(chunk => `- **${chunk.names.join(', ')}**: ${formatBytes(chunk.size)}`)
+  .join('\n')}
+
+## 🔍 大文件警告
+
+${assets
+  .filter(asset => asset.size > 1024 * 1024) // 1MB以上
+  .sort((a, b) => b.size - a.size)
+  .map(asset => `- ⚠️ **${asset.name}**: ${formatBytes(asset.size)} (建议优化)`)
+  .join('\n') || '✅ 没有超过1MB的文件'}
+
+## 📈 性能建议
+
+### 🚀 已实施的优化
+- ✅ 代码分割 (${chunks.length} 个chunk)
+- ✅ 资源压缩
+- ✅ 缓存策略
+- ✅ 预加载关键资源
+
+### 🎯 进一步优化建议
+${generateOptimizationSuggestions(assets, chunks)}
+
+---
+*报告生成时间: ${new Date().toLocaleString()}*
+`
+
+  return report
+}
+
+function generateOptimizationSuggestions(assets, chunks) {
+  const suggestions = []
+  
+  // 检查大文件
+  const largeFiles = assets.filter(asset => asset.size > 500 * 1024) // 500KB以上
+  if (largeFiles.length > 0) {
+    suggestions.push('- 考虑进一步分割大文件或使用动态导入')
+  }
+  
+  // 检查chunk数量
+  if (chunks.length > 20) {
+    suggestions.push('- Chunk数量较多，考虑合并相关功能')
+  }
+  
+  // 检查图片优化
+  const images = assets.filter(asset => /\.(png|jpg|jpeg|gif|svg)$/.test(asset.name))
+  const largeImages = images.filter(asset => asset.size > 100 * 1024) // 100KB以上
+  if (largeImages.length > 0) {
+    suggestions.push('- 优化大图片，考虑使用WebP格式')
+  }
+  
+  if (suggestions.length === 0) {
+    suggestions.push('- 当前配置已经相当优化！')
+  }
+  
+  return suggestions.join('\n')
+}
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+} 

scripts/dev.js

@@ -0,0 +1,134 @@
+#!/usr/bin/env node
+
+// 设置环境变量以抑制各种警告
+process.env.NODE_ENV = 'development';
+process.env.SASS_SILENCE_DEPRECATIONS = '*';
+process.env.NODE_OPTIONS = '--no-deprecation --no-warnings --disable-warning=ExperimentalWarning';
+process.env.NPM_CONFIG_AUDIT = 'false';
+process.env.NPM_CONFIG_FUND = 'false';
+process.env.DISABLE_OPENCOLLECTIVE = 'true';
+process.env.SUPPRESS_NO_CONFIG_WARNING = 'true';
+process.env.CI = 'true';
+
+const { spawn } = require('child_process');
+const path = require('path');
+
+// 找到 webpack-cli 的真实路径
+const webpackCliPath = require.resolve('webpack-cli/bin/cli.js');
+
+// 设置 Node.js 内存限制和优化参数
+const nodeArgs = [
+  '--max-old-space-size=8192',  // 8GB 内存限制
+  '--gc-interval=100',          // 更频繁的垃圾回收
+  webpackCliPath,               // <--- 修改这里：直接使用JS文件的绝对路径
+  'serve',
+  '--config', 
+  path.resolve(__dirname, '../webpack.config.js'),
+  '--mode', 
+  'development'
+];
+// // 设置 Node.js 内存限制和优化参数
+// const nodeArgs = [
+//   '--max-old-space-size=8192',  // 8GB 内存限制
+//   '--gc-interval=100',          // 更频繁的垃圾回收
+//   path.resolve(__dirname, '../node_modules/.bin/webpack'),
+//   'serve',
+//   '--config', 
+//   path.resolve(__dirname, '../webpack.config.js'),
+//   '--mode', 
+//   'development'
+// ];
+
+console.log('🚀 启动开发服务器...');
+console.log('💾 内存限制: 8GB');
+console.log('⚡ 启用内存优化模式');
+
+const child = spawn('node', nodeArgs, {
+  stdio: ['inherit', 'pipe', 'pipe'],
+  env: { 
+    ...process.env, 
+    NODE_ENV: 'development',
+    NODE_OPTIONS: '--max-old-space-size=8192'
+  }
+});
+
+// 处理输出，过滤不必要的信息
+child.stdout.on('data', (data) => {
+  const output = data.toString();
+  
+  // 过滤掉Babel和其他不必要的提示
+  const shouldFilter = [
+    '[BABEL] Note:',
+    'code generator has deoptimised',
+    'exceeds the max of',
+    'Deprecation Warning',
+    'WARNING in',
+    'export \'',
+    'was not found in'
+  ].some(warning => output.includes(warning));
+  
+  if (shouldFilter) {
+    return; // 直接忽略这些输出
+  }
+  
+  // 显示重要信息
+  if (output.includes('webpack compiled') || 
+      output.includes('Local:') || 
+      output.includes('Network:') ||
+      output.includes('webpack://') ||
+      output.includes('ERROR') ||
+      output.includes('ready') ||
+      output.includes('Project is running') ||
+      output.includes('webpack-dev-server')) {
+    process.stdout.write(output);
+  }
+});
+
+child.stderr.on('data', (data) => {
+  const output = data.toString();
+  // 过滤掉各种类型的警告
+  const shouldFilter = [
+    'Deprecation',
+    'experiment',
+    'warning',
+    'WARNING in',
+    '@import rules are deprecated',
+    'More info and automated migrator',
+    'sass-lang.com/d/import',
+    'Global built-in functions are deprecated',
+    'Use meta.inspect instead',
+    'Use string.slice instead', 
+    'Use string.index instead',
+    'Use color.mix instead',
+    'export \'', // 模块导出警告
+    'Invalid deprecation', // 无效的弃用警告
+    'Module Warning (from ./node_modules/sass-loader',
+    '[BABEL] Note:', // Babel提示
+    'code generator has deoptimised', // Babel代码生成提示
+    'exceeds the max of', // 文件大小提示
+    'was not found in' // 导出未找到警告
+  ].some(warning => output.includes(warning));
+  
+  if (!shouldFilter) {
+    process.stderr.write(output);
+  }
+});
+
+child.on('close', (code) => {
+  console.log(`开发服务器退出，代码: ${code}`);
+});
+
+child.on('error', (error) => {
+  console.error('❌ 启动失败:', error.message);
+  console.log('\n🔧 请尝试手动运行: npm run dev:simple');
+});
+
+// 处理进程退出
+process.on('SIGINT', () => {
+  console.log('\n正在关闭开发服务器...');
+  child.kill('SIGINT');
+});
+
+process.on('SIGTERM', () => {
+  child.kill('SIGTERM');
+}); 

src/App.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="app">
+    <router-view />
+    <base-video-listener @click="videoListenerClick" @new="newPosition" @append="appendPosition"></base-video-listener>
+  </div>
+</template>
+
+<script>
+import MapRef from './common/MapRef'
+export default {
+  name: 'App',
+  components: {
+  },
+  provide() {
+    return {
+      mapRef: new MapRef({
+        onMapSet: this.onMapChange
+      }),
+      mapFlag: () => this.mapFlag
+    }
+  },
+  data: function() {
+    return {
+      mapFlag: null // 用于触发更新用的简易对象。这个对象仅仅用于刷新引用，里面的数据不具备任何意义。
+    }
+  },
+  methods: {
+    onMapChange() {
+      this.mapFlag = {}
+    },
+    videoListenerClick(){
+      this.$globalEventBus.$emit(
+        `videoListener__click`,{}
+      )
+    },
+    newPosition(index){
+      this.$globalEventBus.$emit(
+        `newPosition__click`,{index}
+      )
+    },
+    appendPosition(index){
+      this.$globalEventBus.$emit(
+        `appendPosition__click`,{index}
+      )
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+html,
+body,
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  height: 100vh;
+  width: 100vw;
+  margin: 0px;
+  padding: 0px;
+  background-color: #090f18;
+  /* overflow: hidden; */
+  .big-screen + .video-item-body.video-dialog-drag{
+    position: unset;
+  }
+  ::v-deep .video-item.newPositionClass{
+    z-index: 985 !important;
+  }
+}
+img {
+  vertical-align: top;
+}
+</style>

src/assets/font/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}