china-diff 1.0.1

package/src/dom.ts

@@ -0,0 +1,137 @@
+export const isBrowser = typeof window !== 'undefined';
+
+export const addEventListener: typeof document.addEventListener = isBrowser
+  ? document.addEventListener.bind(document)
+  : () => {};
+
+export const removeEventListener: typeof document.removeEventListener = isBrowser
+  ? document.removeEventListener.bind(document)
+  : () => {};
+
+/**
+ * 显示遮罩层的数量
+ */
+let maskLayers: Function[] = [];
+/**
+ * 遮罩层
+ */
+let maskLayer: HTMLElement;
+
+if (isBrowser) {
+  const root = document.documentElement;
+
+  const disableGlobalScroll = (event) => {
+    if (!maskLayers.length) {
+    } else {
+      let target = event.target as HTMLElement;
+
+      while (target && target !== root) {
+        if (
+          (window.getComputedStyle(target).overflow !== 'hidden' && target.scrollWidth > target.clientWidth) ||
+          target.scrollHeight > target.clientHeight
+        ) {
+          // todo 未处理滚动条顶或底的问题
+          return;
+        }
+
+        target = target.parentNode as HTMLElement;
+      }
+
+      event.preventDefault();
+      return false;
+    }
+  };
+
+  root.addEventListener('wheel', disableGlobalScroll, { passive: false });
+  root.addEventListener('touchmove', disableGlobalScroll, { passive: false });
+}
+
+/**
+ * 显示遮罩层
+ */
+export const showMaskLayer = (onclick?: () => void) => {
+  if (isBrowser) {
+    if (!maskLayers.length) {
+      if (!maskLayer) {
+        let div = (maskLayer = document.createElement('div'));
+
+        div.className = 'mask-layer';
+        div.style.cssText =
+          'position:fixed;top:0;left:0;right:0;bottom:0;display:none;background:rgba(0,0,0,0.4);z-index:8';
+
+        // 点击遮罩层方法
+        div.addEventListener('click', (event) => {
+          let callbackFn = maskLayers[maskLayers.length - 1];
+
+          callbackFn && callbackFn(event);
+        });
+
+        document.body.appendChild(div);
+      }
+
+      maskLayer.style.display = 'block';
+    }
+
+    maskLayers.push(onclick);
+  }
+};
+
+/**
+ * 隐藏遮罩层
+ */
+export const hideMaskLayer = () => {
+  if (isBrowser) {
+    maskLayers.pop();
+
+    if (!maskLayers.length) {
+      maskLayer.style.display = 'none';
+    }
+  }
+};
+
+const autocloseList = [];
+
+/**
+ * 注册自动关闭方法（弹出层，菜单等）
+ *
+ * @param onclose 自动关闭方法
+ */
+export const registerAutoClose = isBrowser
+  ? (onclose: () => void) => {
+      autocloseList.push(onclose);
+    }
+  : () => {};
+
+/**
+ * 取消注册自动关闭方法（弹出层，菜单等）
+ *
+ * @param onclose 自动关闭方法
+ */
+export const unregisterAutoClose = (onclose: () => void) => {
+  for (let i = autocloseList.length; i--; ) {
+    if (autocloseList[i] === onclose) {
+      autocloseList.splice(i, 1);
+      break;
+    }
+  }
+};
+
+/**
+ * 侦听自动关闭事件（一般设置到 solid-js 的 App 节点上，且只能侦听一次）
+ */
+export const listenAutoCloseEvent = {
+  onpointerdown: () => {
+    for (let i = 0, l = autocloseList.length; i < l; i++) {
+      autocloseList[i]();
+    }
+  },
+};
+
+/**
+ * 禁止自动关闭事件
+ */
+export const disableAutoCloseEvent = {
+  onpointerdown: (event: Event) => {
+    event.stopPropagation();
+  },
+};

package/src/http.ts

@@ -0,0 +1,282 @@
+/**
+ * http 拦截器
+ */
+export const httpInterceptor = {
+  /**
+   * 请求拦截
+   */
+  request: (() => {}) as (url: string, options: RequestInit) => string | void,
+
+  /**
+   * 响应拦截（返回 Promise true 表示需要重新发送请求，返回 Promise false 抛出默认异常）
+   */
+  response: (() => {}) as (
+    response: Response,
+    options?: RequestInit,
+    preventLogon?: boolean,
+  ) => Promise<boolean> | void,
+};
+
+/**
+ * API响应结果
+ */
+export interface Result<T> {
+  /**
+   * 响应代码
+   */
+  code: number | string;
+  /**
+   * 响应消息
+   */
+  message: string;
+  /**
+   * 响应数据
+   */
+  data: T;
+}
+
+/**
+ * http 响应结果
+ */
+export type HttpResult<T> = Promise<Result<T>> & {
+  /**
+   * 获取返回响应结果 { code, message, data } 中的 data
+   */
+  get data(): Promise<T>;
+};
+
+// 扩展 data 属性
+Object.defineProperty(Promise.prototype, 'data', {
+  configurable: true,
+
+  get() {
+    return this.then((result) => {
+      let data = result.data;
+
+      if (data !== void 0) {
+        return data;
+      }
+
+      return Promise.reject(result.code + ' ' + result.message);
+    });
+  },
+});
+
+const handleResponse = (response: Response, url: string, options?: RequestInit, preventLogon?: boolean) => {
+  // 响应拦截
+  let promise = httpInterceptor.response(response, options, preventLogon);
+
+  // 返回了异步对象
+  if (promise) {
+    // 返回状态为 true 表示需要重新发送请求
+    return promise.then((status) =>
+      status ? sendInternal(url, options, preventLogon) : Promise.reject(response.status + ' ' + response.statusText),
+    );
+  }
+
+  // 成功响应
+  if (response.ok) {
+    return response;
+  }
+
+  // 失败返回异常
+  return Promise.reject(response.status + ' ' + response.statusText);
+};
+
+/**
+ * 发送方法
+ *
+ * @param url 请求URL
+ * @param data 请求数据
+ * @param options 请求参数
+ */
+let sendInternal = (url: string, options?: RequestInit, preventLogon?: boolean): Promise<Response> => {
+  return fetch(url, options).then((response) => handleResponse(response, url, options, preventLogon));
+};
+
+/**
+ * 自定义请求发送
+ *
+ * @param url 请求URL
+ * @param options 请求参数
+ */
+const send = (url: string, options?: RequestInit, preventLogon?: boolean): Promise<Response> => {
+  return fetch(url, options).then((response) => handleResponse(response, url, options, preventLogon));
+};
+
+/**
+ * 自定义请求 JSON 数据的方法
+ *
+ * @param method 请求方法
+ * @param url 请求URL
+ * @param data 请求数据
+ * @param options 请求参数
+ */
+const request = <T>(
+  method: string,
+  url: string,
+  data?: unknown,
+  options?: Omit<RequestInit, 'body'>,
+  preventLogon?: boolean,
+): HttpResult<T> => {
+  if (options) {
+    let headers = options.headers;
+
+    options.method = method;
+
+    if (headers ? !headers['Content-Type'] : (headers = options.headers = {})) {
+      headers['Content-Type'] = 'application/json';
+    }
+  } else {
+    options = {
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    };
+  }
+
+  if (data !== void 0) {
+    (options as RequestInit).body = JSON.stringify(data);
+  }
+
+  url = httpInterceptor.request(url, options) || url;
+
+  return sendInternal(url, options, preventLogon).then((response) => response.json()) as HttpResult<T>;
+};
+
+/**
+ * GET请求获取 JSON 数据
+ *
+ * @param url 请求URL
+ * @param options 请求参数
+ * @example 取消示例
+ * import http from 'china-diff/http';
+ *
+ * const controller = new AbortController();
+ * const signal = controller.signal;
+ *
+ * // 3秒后未返回则取消
+ * setTimeout(() => controller.abort(), 3000);
+ * // 发送带取消信号的请求
+ * http.get('https://example.com/api/...', { signal });
+ */
+const get = <T>(url: string, options?: Omit<RequestInit, 'method' | 'body'>, preventLogon?: boolean): HttpResult<T> => {
+  return request('GET', url, void 0, options, preventLogon);
+};
+
+/**
+ * POST请求获取 JSON 数据
+ *
+ * @param url 请求URL
+ * @param data 请求数据（JSON）
+ * @param options 请求参数
+ * @example 取消示例
+ * import http from 'china-diff/http';
+ *
+ * const controller = new AbortController();
+ * const signal = controller.signal;
+ *
+ * // 3秒后未返回则取消
+ * setTimeout(() => controller.abort(), 3000);
+ * // 发送带取消信号的请求
+ * http.post('https://example.com/api/...', null, { signal });
+ */
+const post = <T>(
+  url: string,
+  data?: unknown,
+  options?: Omit<RequestInit, 'method' | 'body'>,
+  preventLogon?: boolean,
+): HttpResult<T> => {
+  return request('POST', url, data, options, preventLogon);
+};
+
+/**
+ * PUT请求获取 JSON 数据
+ *
+ * @param url 请求URL
+ * @param data 请求数据（JSON）
+ * @param options 请求参数
+ */
+const put = <T>(
+  url: string,
+  data: unknown,
+  options?: Omit<RequestInit, 'method' | 'body'>,
+  preventLogon?: boolean,
+): HttpResult<T> => {
+  return request('PUT', url, data, options, preventLogon);
+};
+
+/**
+ * DELET请求获取 JSON 数据
+ *
+ * @param url 请求URL
+ * @param options 请求参数
+ */
+const del = <T>(
+  url: string,
+  data?: unknown,
+  options?: Omit<RequestInit, 'method' | 'body'>,
+  preventLogon?: boolean,
+): HttpResult<T> => {
+  return request('DELETE', url, data, options, preventLogon);
+};
+
+/**
+ * 网络跟踪结果
+ */
+export interface NetworkTrackingResult {
+  start: number;
+  end: number;
+  url: string;
+  options?: RequestInit;
+  response?: Response;
+  error?: any;
+}
+
+/**
+ * 跟踪网络请求
+ *
+ * @param callbackFn 回调处理
+ */
+export const track = (callbackFn: (result: NetworkTrackingResult) => void) => {
+  sendInternal = (url: string, options?: RequestInit, preventLogon?: boolean): Promise<Response> => {
+    let start = Date.now();
+
+    return fetch(url, options)
+      .then((response) => {
+        callbackFn({
+          start,
+          end: Date.now(),
+          url,
+          options,
+          response,
+        });
+
+        return handleResponse(response, url, options, preventLogon);
+      })
+      .catch((error) => {
+        callbackFn({
+          start,
+          end: Date.now(),
+          url,
+          options,
+          error,
+        });
+
+        return Promise.reject(error);
+      });
+  };
+};
+
+/**
+ * http 请求
+ */
+export const http = {
+  send,
+  request,
+  get,
+  post,
+  put,
+  del,
+};

package/src/index.ts

@@ -0,0 +1,68 @@
+export * from './message';
+export * from './language';
+export * from './http';
+
+export {
+  type JSX,
+  createComponent,
+  createEffect,
+  createMemo,
+  createContext,
+  useContext,
+  splitProps,
+  onMount,
+  onCleanup,
+  untrack,
+  batch,
+} from 'solid-js';
+
+export { Show, For, hydrate, render } from 'solid-js/web';
+
+export * from './dom';
+export * from './animate-scroll-to';
+
+export * from './reactive';
+export * from './location';
+export * from './layout';
+
+export * from './components/If';
+export * from './components/Switch';
+export * from './components/For';
+export * from './components/Icon';
+export * from './components/CollapsiblePanel';
+export * from './components/ComboBox';
+export * from './components/Carousel';
+export * from './components/KeepAlive';
+export * from './components/Dialog';
+
+declare global {
+  export interface ImportMeta {
+    // 配置环境变量类型
+    env: {
+      /**
+       * 应用运行模式
+       */
+      MODE: string;
+
+      /**
+       * 是否服务端渲染
+       */
+      SSR: boolean;
+
+      /**
+       * 是否浏览器模式
+       */
+      VITE_BROWSER: boolean;
+
+      /**
+       * API基础路径
+       */
+      VITE_API_BASE_URL: string;
+
+      /**
+       * 是否开启 API Mock
+       */
+      VITE_API_MOCK: boolean;
+    };
+  }
+}

package/src/jsx.ts

@@ -0,0 +1,2 @@
+export { type JSX } from 'solid-js';
+

package/src/language.ts

@@ -0,0 +1,34 @@
+/**
+ * 修复语言大小写问题（有些浏览器会把 zh-CN 写成 zh-cn）
+ *
+ * @param name 语言名称
+ */
+const fixLanguageName = (name: string) => {
+  let index = name.indexOf('-');
+
+  if (index < 0) {
+    index = name.indexOf('_');
+  }
+
+  if (index > 0) {
+    return name.slice(0, index) + '-' + name.slice(index + 1).toUpperCase();
+  }
+
+  return name;
+};
+
+/**
+ * 获取当前语言名称
+ */
+export const getLanguage = (): string => {
+  return localStorage.getItem('LANGUAGE') || fixLanguageName(navigator.language) || 'en';
+};
+
+/**
+ * 保存当前语言名称
+ *
+ * @param name 语言名
+ */
+export const saveLanguage = (name: string) => {
+  localStorage.setItem('LANGUAGE', name ? fixLanguageName(name) : 'en');
+};

package/src/layout.ts

@@ -0,0 +1,89 @@
+import { isBrowser } from './dom';
+import { reactive } from './reactive';
+
+/**
+ * 当前布局
+ */
+// export const layout = reactive({
+//   pc: true,
+//   tablet: false,
+//   mobile: false,
+//   landscape: true,
+//   'gt-1920': false,
+//   'gt-1280': false,
+//   'gt-1024': true,
+//   'gt-800': true,
+//   'gt-640': true,
+//   'gt-480': true,
+
+//   'ge-1920': false,
+//   'ge-1280': true,
+//   'ge-1024': true,
+//   'ge-800': true,
+//   'ge-640': true,
+//   'ge-480': true,
+
+//   'le-1920': true,
+//   'le-1280': true,
+//   'le-1024': false,
+//   'le-800': false,
+//   'le-640': false,
+//   'le-480': false,
+
+//   'lt-1920': true,
+//   'lt-1280': false,
+//   'lt-1024': false,
+//   'lt-800': false,
+//   'lt-640': false,
+//   'lt-480': false,
+// });
+// 默认按手机端展示
+export const layout = reactive({
+  pc: true,
+  tablet: false,
+  mobile: false,
+  landscape: true,
+  'gt-1920': false,
+  'gt-1280': false,
+  'gt-1024': false,
+  'gt-800': false,
+  'gt-640': false,
+  'gt-480': false,
+
+  'ge-1920': false,
+  'ge-1280': false,
+  'ge-1024': false,
+  'ge-800': false,
+  'ge-640': false,
+  'ge-480': true,
+
+  'le-1920': true,
+  'le-1280': true,
+  'le-1024': true,
+  'le-800': true,
+  'le-640': true,
+  'le-480': true,
+
+  'lt-1920': true,
+  'lt-1280': true,
+  'lt-1024': true,
+  'lt-800': true,
+  'lt-640': true,
+  'lt-480': false,
+});
+
+const update = () => {
+  let classList = document.body.classList;
+  let names = Object.getOwnPropertyNames(layout);
+
+  for (let i = 0, l = names.length; i < l; i++) {
+    layout[names[i]] = classList.contains(names[i]);
+  }
+};
+
+if (isBrowser) {
+  // 更新布局
+  update();
+  // 订阅布局发生变化事件(由 index.html 发出)
+  (window as any).onlayoutchange = update;
+}