自己的开源项目[meng-admin](http://meng-admin.qianxun.shop/meng-react-admin-preview/)登录环节告一段落，部署到线上时遇到了很多问题，例如前端vite开启了base以及使用browser路由模式404的问题，具体的nginx配置见下文




![image.png](/static/img/4920ca3b3021f416b43d03f43a5497c0.image.webp)
前端项目开启了base

![image.png](/static/img/23a154514372159fc83305ee9fea5b8e.image.webp)

![image.png](/static/img/cd03cf06ea61a30dfc4b35000b3024c0.image.webp)

nginx配置如下
```nginx.conf
server {
        listen       8091;
        server_name  localhost; 

        location /meng-react-admin-preview {
            alias   /usr/local/nginx/meng-admin/;
            # nginx 配置优先使用路由( try_files 和 autoindex配置)，不自动指向index.html 解决在browser路由模式下刷新404的问题
            try_files $uri $uri/ /meng-react-admin-preview/index.html;
            index  index.html index.htm;
            autoindex on;
            gzip on;
        }
        location /ma/api {
            # axios接口转发
            rewrite ^/ma/(.*)$ /$1 break;
            proxy_pass http://127.0.0.1:8090;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Upgrade $http_upgrade;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

```

nginx代理配置

Angular组件(一) 分割面板ShrinkSplitter

层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式，层叠性主要解决样式冲突的问题。那么,css是如何处理的呢


层叠计算分为三个步骤：优先级、特殊性(特定性)、源次序

## 步骤一： 优先级
优先级: 比较样式的来源

1. 作者样式表中带 `!important`
2. 浏览器默认样式表带 `!important`
3. 作者样式表普通样式
4. 浏览器默认样式表普通样式

优先级从上到下依次递减
如果在步骤一没有解决冲突就进入步骤二

![image.png](/static/img/9144d4b14b02834123994f6b0c3c1bd6.image.webp)
从上图可见，我们自己写的样式会把浏览器默认样式给覆盖掉

## 步骤二： 特殊性(特定性)
特殊性就是大家经常说的权重

每一个样式都可以用四段数字表示(A,B,C,D),这四段数字级别从左往右依次降低

第一段A: 只能是0或1，内联样式为1，否则就是 0

第二段B: 样式所处的选择器有多少个ID选择器

第三段C: 样式所处的选择器有多少个`类选择器`、`属性选择器`、`伪类选择器`

第四段D: 样式所处的选择器有多少个`元素选择器`、`伪元素选择器`

我们一般比较的都是外联样式的css，所以一般我们看到都是后三段

```css
#app .container.page-home[type="user"] .home-banner a:hover{
      color: burlywood;
    }
```

![image.png](/static/img/dded80621a25e46c8381adbbe76025af.image.webp)

图片中显示的特定性数字是怎么计算来的呢？

id选择器有一个: 
- #app 
类选择器、属性选择器、伪类选择器有5个: 
- .container
- .page-home
- [type="user"]
- .home-banner
- :hover

元素选择器、伪元素选择器1个
- a

所以特定性(1,5,1)


## 步骤三: 源次序

css样式从上到下扫描，下面的会覆盖上面的

css 层叠规则

# 告别臃肿 Axios 封装！打造 Vue 风格插件化请求管理工具


## 📘 前言
在前端项目开发中，Axios 几乎是标配 HTTP 请求库。
为了实现鉴权、日志、错误处理、重复请求取消、接口重试、缓存等能力，我们几乎都会对 Axios 进行二次封装。

但传统封装普遍存在这些痛点：
- 所有逻辑耦合在一个文件，代码臃肿
- 新增/删除功能要改多处，维护成本高
- 功能混杂，可读性差
- 无法灵活组合能力，复用性差

今天给大家带来一套**模仿 Vue 插件机制的 Axios 插件化封装**：
`createAxios().use(插件1).use(插件2)`
真正做到：解耦、可插拔、高复用、易维护、生产可用。




---

## 🎯 设计目标
- 模仿 Vue 插件机制，使用 `.use()` 链式调用
- 每个功能独立成插件，互不影响
- 支持插件配置、防重复安装、异常捕获
- 内置高频通用插件，开箱即用
- 支持预设模式，一行创建完整请求实例

---

## 📁 目录
1. 核心实现：createAxios 插件管理器
2. 插件编写规范
3. 内置七大实用插件
4. 使用示例（链式调用）
5. 预设模式（极简/默认/全量）
6. 完整源码（可直接复制使用）

---

## 🔧 一、核心实现：createAxios 插件管理器
这是整个架构的灵魂，负责创建 Axios 实例、管理插件生命周期。

```javascript
import axios from 'axios';

export function createAxios(config = {}) {
  const instance = axios.create(config);
  const installedPlugins = new Set();
  const pluginOrder = [];

  function use(plugin, options = {}) {
    if (typeof plugin === 'function') {
      plugin = { install: plugin };
    }

    if (!plugin || typeof plugin.install !== 'function') {
      console.error('[AxiosUse] 插件必须提供 install 方法');
      return instance;
    }

    if (installedPlugins.has(plugin)) {
      console.warn('[AxiosUse] 插件已安装，跳过');
      return instance;
    }

    installedPlugins.add(plugin);
    try {
      plugin.install(instance, options);
      console.log(`[AxiosUse] ✅ 插件安装成功: ${plugin.name || 'anonymous'}`);
    } catch (error) {
      console.error('[AxiosUse] ❌ 插件安装失败', error);
    }

    return instance;
  }

  function useBatch(plugins) {
    plugins.forEach(({ plugin, options = {} }) => {
      use(plugin, options);
    });
    return instance;
  }

  instance.use = use;
  instance.useBatch = useBatch;
  instance.getInstalledPlugins = () => [...pluginOrder];
  instance.hasPlugin = (plugin) => installedPlugins.has(plugin);

  return instance;
}
```

## 📝 二、插件编写规范

和 Vue 插件完全一致，必须提供 install 方法。
```
const MyPlugin = {
  name: 'MyPlugin',
  install(axiosInstance, options) {
    axiosInstance.interceptors.request.use(config => {
      return config;
    });
  }
};

const http = createAxios().use(MyPlugin);
```

## 🧩 三、内置七大实用插件

1. LogPlugin
请求 / 响应 / 错误 / 耗时日志，开发调试神器
2. TokenPlugin
自动携带 Token，支持白名单、自定义请求头
3. CancelDuplicatePlugin
取消重复请求，防止重复点击、接口竞态
4. RetryPlugin
指数退避重试，弱网环境必备
5. LoadingPlugin
自动管理全局 Loading，计数模式防闪烁
6. CachePlugin
GET 请求缓存（LRU 策略），提升页面性能
7. ErrorHandlerPlugin
统一错误处理，状态码映射 + 全局提示

## 🚀 四、使用示例（链式调用）
```
const http = createAxios({ baseURL: '/api' })
  .use(LogPlugin)
  .use(TokenPlugin, {
    getToken: () => localStorage.getItem('token'),
    whiteList: ['/login', '/register']
  })
  .use(CancelDuplicatePlugin)
  .use(RetryPlugin, { maxRetries: 3 })
  .use(LoadingPlugin)
  .use(CachePlugin, { ttl: 5 * 60 * 1000 })
  .use(ErrorHandlerPlugin);
```

## ⚡️ 五、预设模式（一行创建实例）

```
import { createAxiosWithPreset } from '@/utils/axios';

// 极简模式
const httpMin = createAxiosWithPreset('minimal');

// 默认模式
const httpDefault = createAxiosWithPreset('default');

// 全量模式
const httpFull = createAxiosWithPreset('full');
```



## 📦 六、完整源码
```
/**
 * Axios 插件管理工具 - 类似 Vue 的 use 链式调用风格
 */

import axios from 'axios';

export function createAxios(config = {}) {
  const instance = axios.create(config);
  const installedPlugins = new Set();
  const pluginOrder = [];

  function use(plugin, options = {}) {
    if (typeof plugin === 'function') {
      plugin = { install: plugin };
    }

    if (!plugin || typeof plugin.install !== 'function') {
      console.error('[AxiosUse] 插件必须提供 install 方法:', plugin);
      return instance;
    }

    if (installedPlugins.has(plugin)) {
      console.warn('[AxiosUse] 插件已安装，跳过:', plugin.name || 'anonymous');
      return instance;
    }

    installedPlugins.add(plugin);
    const pluginInfo = {
      name: plugin.name || 'anonymous',
      options,
      installTime: Date.now()
    };
    pluginOrder.push(pluginInfo);

    try {
      plugin.install(instance, options);
      console.log(`[AxiosUse] ✅ 插件安装成功: ${pluginInfo.name}`);
    } catch (error) {
      console.error(`[AxiosUse] ❌ 插件安装失败: ${pluginInfo.name}`, error);
    }

    return instance;
  }

  function useBatch(plugins) {
    plugins.forEach(({ plugin, options = {} }) => {
      use(plugin, options);
    });
    return instance;
  }

  instance.use = use;
  instance.useBatch = useBatch;
  instance.getInstalledPlugins = () => [...pluginOrder];
  instance.hasPlugin = (plugin) => installedPlugins.has(plugin);

  return instance;
}

// ==================== 内置插件 ====================

export const LogPlugin = {
  name: 'LogPlugin',
  install(instance, options = {}) {
    const {
      logRequest = true,
      logResponse = true,
      logError = true,
      prefix = '[Axios]'
    } = options;

    instance.interceptors.request.use(
      (config) => {
        config._startTime = Date.now();
        logRequest && console.log(`${prefix} 📤 ${config.method?.toUpperCase()} ${config.url}`);
        return config;
      },
      (error) => {
        logError && console.error(`${prefix} ❌ 请求错误:`, error.message);
        return Promise.reject(error);
      }
    );

    instance.interceptors.response.use(
      (response) => {
        const duration = Date.now() - response.config._startTime;
        logResponse && console.log(`${prefix} 📥 ${response.config.url} - ${response.status} (${duration}ms)`);
        return response;
      },
      (error) => {
        if (logError) {
          const duration = Date.now() - (error.config?._startTime || Date.now());
          console.error(
            `${prefix} ❌ ${error.config?.url} - ${error.response?.status || 'Network Error'} (${duration}ms)`
          );
        }
        return Promise.reject(error);
      }
    );
  }
};

export const TokenPlugin = {
  name: 'TokenPlugin',
  install(instance, options = {}) {
    const {
      getToken = () => localStorage.getItem('token'),
      headerName = 'Authorization',
      tokenPrefix = 'Bearer ',
      whiteList = []
    } = options;

    instance.interceptors.request.use(
      (config) => {
        if (whiteList.some(url => config.url?.includes(url))) {
          return config;
        }
        const token = getToken();
        if (token) {
          config.headers[headerName] = `${tokenPrefix}${token}`;
        }
        return config;
      },
      (error) => Promise.reject(error)
    );
  }
};

export const CancelDuplicatePlugin = {
  name: 'CancelDuplicatePlugin',
  install(instance, options = {}) {
    const {
      generateKey = (config) => `${config.method}_${config.url}_${JSON.stringify(config.params)}`,
      message = '取消重复请求'
    } = options;

    const pendingRequests = new Map();

    instance.interceptors.request.use(
      (config) => {
        const key = generateKey(config);
        if (pendingRequests.has(key)) {
          pendingRequests.get(key).cancel(message);
        }
        const source = axios.CancelToken.source();
        config.cancelToken = source.token;
        pendingRequests.set(key, source);
        config._cancelKey = key;
        return config;
      },
      (error) => Promise.reject(error)
    );

    instance.interceptors.response.use(
      (response) => {
        const key = response.config._cancelKey;
        if (key) pendingRequests.delete(key);
        return response;
      },
      (error) => {
        const key = error.config?._cancelKey;
        if (key) pendingRequests.delete(key);
        return Promise.reject(error);
      }
    );
  }
};

export const RetryPlugin = {
  name: 'RetryPlugin',
  install(instance, options = {}) {
    const {
      maxRetries = 3,
      retryDelay = 1000,
      retryDelayMultiplier = 2,
      maxRetryDelay = 30000,
      retryCondition = (error) => {
        return !error.response || error.response.status >= 500;
      }
    } = options;

    instance.interceptors.response.use(
      (response) => response,
      async (error) => {
        const config = error.config;
        if (!config) return Promise.reject(error);

        config._retryCount = config._retryCount || 0;

        if (config._retryCount >= maxRetries || !retryCondition(error)) {
          return Promise.reject(error);
        }

        config._retryCount++;
        const delay = Math.min(
          retryDelay * Math.pow(retryDelayMultiplier, config._retryCount - 1),
          maxRetryDelay
        );

        await new Promise(resolve => setTimeout(resolve, delay));
        return instance(config);
      }
    );
  }
};

export const LoadingPlugin = {
  name: 'LoadingPlugin',
  install(instance, options = {}) {
    const {
      showLoading = () => console.log('Loading...'),
      hideLoading = () => console.log('Loading done'),
      minDuration = 0
    } = options;

    let requestCount = 0;
    let minDurationTimer = null;

    instance.interceptors.request.use(
      (config) => {
        if (config.showLoading !== false) {
          if (requestCount === 0) {
            showLoading();
          }
          requestCount++;
        }
        config._showLoading = config.showLoading !== false;
        return config;
      },
      (error) => Promise.reject(error)
    );

    const hide = () => {
      requestCount--;
      if (requestCount <= 0) {
        requestCount = 0;
        if (minDuration > 0) {
          clearTimeout(minDurationTimer);
          minDurationTimer = setTimeout(() => {
            hideLoading();
          }, minDuration);
        } else {
          hideLoading();
        }
      }
    };

    instance.interceptors.response.use(
      (response) => {
        response.config._showLoading && hide();
        return response;
      },
      (error) => {
        error.config?._showLoading && hide();
        return Promise.reject(error);
      }
    );
  }
};

export const CachePlugin = {
  name: 'CachePlugin',
  install(instance, options = {}) {
    const {
      ttl = 5 * 60 * 1000,
      maxSize = 100,
      keyGenerator = (config) => `${config.url}_${JSON.stringify(config.params)}`
    } = options;

    const cache = new Map();
    const accessOrder = [];

    instance.interceptors.request.use(
      (config) => {
        if (config.method !== 'get' || config.cache === false) return config;
        const key = keyGenerator(config);
        const cached = cache.get(key);

        if (cached && Date.now() < cached.expireTime) {
          const source = axios.CancelToken.source();
          config.cancelToken = source.token;
          setTimeout(() => {
            source.cancel(JSON.stringify({ __fromCache: true, data: cached.data }));
          }, 0);
        }
        config._cacheKey = key;
        return config;
      },
      (error) => Promise.reject(error)
    );

    instance.interceptors.response.use(
      (response) => {
        const key = response.config._cacheKey;
        if (key && response.config.method === 'get') {
          if (cache.size >= maxSize) {
            const oldest = accessOrder.shift();
            cache.delete(oldest);
          }
          cache.set(key, {
            data: response.data,
            expireTime: Date.now() + ttl
          });
          accessOrder.push(key);
        }
        return response;
      },
      (error) => {
        if (axios.isCancel(error) && error.message) {
          try {
            const parsed = JSON.parse(error.message);
            if (parsed.__fromCache) {
              return Promise.resolve({
                data: parsed.data,
                config: error.config,
                status: 200,
                statusText: 'OK (from cache)',
                headers: {}
              });
            }
          } catch {}
        }
        return Promise.reject(error);
      }
    );
  }
};

export const ErrorHandlerPlugin = {
  name: 'ErrorHandlerPlugin',
  install(instance, options = {}) {
    const {
      handler = (error) => console.error('[ErrorHandler]', error.message),
      errorMap = {
        400: '请求参数错误',
        401: '未授权，请重新登录',
        403: '拒绝访问',
        404: '请求的资源不存在',
        500: '服务器内部错误',
        502: '网关错误',
        503: '服务不可用',
        504: '网关超时'
      }
    } = options;

    instance.interceptors.response.use(
      (response) => response,
      (error) => {
        if (error.response) {
          const status = error.response.status;
          error.message = errorMap[status] || `请求失败: ${status}`;
        } else if (error.request) {
          error.message = '网络错误，请检查网络连接';
        }
        handler(error);
        return Promise.reject(error);
      }
    );
  }
};

// ==================== 预设 ====================

export function createAxiosWithPreset(preset = 'default', config = {}) {
  const instance = createAxios(config);

  const presets = {
    minimal: [LogPlugin],
    default: [
      { plugin: LogPlugin },
      { plugin: TokenPlugin },
      { plugin: CancelDuplicatePlugin },
      { plugin: ErrorHandlerPlugin }
    ],
    full: [
      { plugin: LogPlugin },
      { plugin: TokenPlugin },
      { plugin: CancelDuplicatePlugin },
      { plugin: RetryPlugin, options: { maxRetries: 3 } },
      { plugin: LoadingPlugin },
      { plugin: CachePlugin },
      { plugin: ErrorHandlerPlugin }
    ]
  };

  (presets[preset] || presets.default).forEach(({ plugin, options }) => {
    instance.use(plugin, options);
  });

  return instance;
}

export default createAxios;
```

告别臃肿 Axios 封装！打造 Vue 风格插件化请求管理工具

在与大模型交户的过程中，一般采用sse的方式与后端交互，返回流式字符串，前端需要处理渲染这些内容，在使用markdown渲染这些内容时，一般会存在以下问题：分片不完整、字符截断、语法中途断裂、增量刷新闪烁、代码块 / 表格 / 公式渲染异常、安全风险。如果语法不完整，markdown会渲染成普通文本，并不会报错，后续内容补全后会正常渲染，但是会出现内容闪烁问题。那么如何解决呢，一般会采用全量缓存+分片渲染的方案。


演示环境是用的`marked.js`渲染markdown

![image.png](/static/img/46b39d820c82b86064068ca3f7ca1914.image.webp)

先看一段演示

![2026-07-15 13-36-52.2026-07-15 13_40_47.gif](/static/img/2e2a68a469720a7bcd2883581bc2fe75.2026-07-15%2013-36-52.2026-07-15%2013_40_47.gif)

上面的示例中，`官方开源仓库`的超链接和`项目预览图`在没有输出完全的是当成普通文本渲染，还有下面核心功能参数的表格，在表格头没有输出完的时候也是当成普通文本。这种情况会出现内容闪烁的问题，从普通文本编程器超链接或者图片。如何解决这个问题呢，一般会采用内容占位来解决，如果当前chunk不能渲染成有效内容时，会采用其他内容来占位(图片或者其他的html内容均可)

优化后效果如下：

![2026-07-15 13-52-23.2026-07-15 13_59_31.gif](/static/img/12c4d0f24a5f39dfb4cbc80c893ff624.2026-07-15%2013-52-23.2026-07-15%2013_59_31.gif)

对项目预览图和表格用图片进行了占位，等有内容可以渲染后会正常渲染原来的内容。

部分js如下
```javascript

function handleIncompleteMarkdown (cache) { 
  const { token, pending } = cache;
  // 如果当前是普通文本，不需要特殊处理
  if (token === StreamCacheTokenType.Text) return;
  /**
   * 场景1：图片标签以 '!' 开头，如果当前只接收到了一个 '!'，说明是不完整的，应当直接剥离不渲染。
   * ！
   * ^
   */
  if (token === StreamCacheTokenType.Image && pending === '!') return undefined;

  /**
   * 场景2：表格如果已经有两行以上（包含表头和分隔线如 | -- | --|\n），则认为它足够完整，
   * 不会被替换为占位符，可以正常渲染出表格雏形。
   * | column1 | column2 |\n| -- | --|\n
   *                                   ^
   */
  if (token === StreamCacheTokenType.Table && pending.split('\n').length > 2) {
    return pending;
  }
  // 对于其他未完成的语法，尝试映射为自定义组件
  const componentMap = _config.incompleteMarkdownComponentMap || {};
  // 获取映射的组件名，如果没有配置映射，则使用默认的 incomplete-{tokenType} 格式
  const componentName = componentMap[token] || `incomplete-${token}`;
  // 对未完成的内容进行 URI 编码，防止其中的引号等特殊字符破坏 HTML 标签属性
  const encodedPending = safeEncodeURIComponent(pending);
  // 如果开发者提供了对应的自定义组件，则渲染该组件，并将原始未完成内容通过 data-raw 传递进去
  return _config.components[componentName] ? _config.components[componentName] : undefined; // 如果没有提供组件，则返回 undefined，意味着这部分未完成内容将被直接截断不显示
}
```

```js
const incomplete_map = {
  'incomplete-image': '<incomplete-image></incomplete-image>',
  'incomplete-table': '<incomplete-table></incomplete-table>',
  'xmd-tail': `<span className="xmd-tail">▋</span>`,
}
```
`<incomplete-image></incomplete-image>`这些都是自定义的html元素标签