@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/libs/config/state.ts

@@ -0,0 +1,33 @@
+import { reactive } from 'vue';
+import type { DebugLevel } from './types';
+
+export const SNAKE_UI_VERSION = '0.3.0';
+
+export interface AppConfig {
+    v: string;
+    version: string;
+    defaultTheme: string;
+    defaultDarkMode: 'light' | 'dark' | 'auto';
+    defaultLocale: string;
+    debugMode: boolean | DebugLevel | DebugLevel[];
+}
+
+export const config = reactive<AppConfig>({
+    v: SNAKE_UI_VERSION,
+    version: SNAKE_UI_VERSION,
+    defaultTheme: 'snake',
+    defaultDarkMode: 'light',
+    defaultLocale: 'zh-CN',
+    debugMode: false
+});
+
+export function setConfig(options: Partial<AppConfig>): void {
+    Object.assign(config, options);
+}
+
+export function isDebugMode(level: DebugLevel = 'log'): boolean {
+    if (config.debugMode === true) return true;
+    if (config.debugMode === false) return false;
+    if (Array.isArray(config.debugMode)) return config.debugMode.includes(level);
+    return config.debugMode === level;
+}

package/libs/config/theme.ts

@@ -0,0 +1,351 @@
+import { computed, reactive, ref } from 'vue';
+import { isDebugMode, config } from './state';
+import type { DarkMode, Theme, ThemeColor, ThemeOption } from './types';
+
+const THEME_STORAGE_KEY = 'snake-ui-theme';
+const DARK_MODE_STORAGE_KEY = 'snake-ui-dark-mode';
+
+export const lightPalette: ThemeColor = {
+    // 品牌绿七档（自有品牌色，保留）
+    primary: '#06D290',
+    primaryDark: '#2EBD7C',
+    primaryDeep: '#26273A',
+    primaryDeeper: '#22242E',
+    primaryDisabled: '#A6EBD3',
+    primaryLight: '#EEFFE0',
+    primaryInk: '#FFFFFF',
+    // 语义色与中性色默认主题（lightPalette）
+    success: '#19BE6B',
+    successDark: '#18B566',
+    successDisabled: '#71D5A1',
+    successLight: '#DBF1E1',
+    warning: '#FF9900',
+    warningDark: '#F29100',
+    warningDisabled: '#FCBD71',
+    warningLight: '#FDF6EC',
+    error: '#FA3534',
+    errorDark: '#DD6161',
+    errorDisabled: '#FAB6B6',
+    errorLight: '#FEF0F0',
+    info: '#909399',
+    infoDark: '#82848A',
+    infoDisabled: '#C8C9CC',
+    infoLight: '#F4F4F5',
+    white: '#ffffff',
+    black: '#000000',
+    // mainColor / contentColor / tipsColor / lightColor
+    text: '#303133',
+    textSecondary: '#606266',
+    textMuted: '#909399',
+    textLight: '#C0C4CC',
+    // borderColor / dividerColor / maskColor / shadowColor / bgColor / bgWhite / bgGrayLight
+    border: '#DCDFE6',
+    divider: '#E4E7ED',
+    mask: 'rgba(0, 0, 0, 0.4)',
+    shadow: 'rgba(0, 0, 0, 0.1)',
+    background: '#F6F6F6',
+    surface: '#ffffff',
+    surfaceMuted: '#F1F1F1',
+    notice: '#FF9900',
+    noticeBackground: '#FDF6EC'
+};
+
+export const darkPalette: ThemeColor = {
+    // 品牌绿七档（暗色下仍保持品牌绿，自有体系）
+    primary: '#06D290',
+    primaryDark: '#2EE6A8',
+    primaryDeep: '#1A1B29',
+    primaryDeeper: '#14151F',
+    primaryDisabled: '#1E3A31',
+    primaryLight: '#0C2A1E',
+    primaryInk: '#26273A',
+    // 语义色与中性色暗色主题（darkPalette）
+    success: '#4ADE80',
+    successDark: '#1F9D57',
+    successDisabled: '#2F4D3D',
+    successLight: '#10291F',
+    warning: '#FBBF24',
+    warningDark: '#C88F00',
+    warningDisabled: '#4A3B17',
+    warningLight: '#2B1F05',
+    error: '#FF6B6B',
+    errorDark: '#D83A3A',
+    errorDisabled: '#4F2323',
+    errorLight: '#2D1414',
+    info: '#A0A7B8',
+    infoDark: '#7C8394',
+    infoDisabled: '#3B3F4C',
+    infoLight: '#1D2029',
+    white: '#F5F6F7',
+    black: '#F5F6F7',
+    // mainColor / contentColor / tipsColor / lightColor
+    text: '#F5F6F7',
+    textSecondary: '#CFD3DC',
+    textMuted: '#9AA1AF',
+    textLight: '#6B7082',
+    // borderColor / dividerColor / maskColor / shadowColor / bgColor / bgWhite / bgGrayLight
+    border: '#3A4251',
+    divider: '#3A4251',
+    mask: 'rgba(0, 0, 0, 0.6)',
+    shadow: 'rgba(0, 0, 0, 0.3)',
+    background: '#111827',
+    surface: '#000000',
+    surfaceMuted: '#1A1A1A',
+    notice: '#FBBF24',
+    noticeBackground: '#2B1F05'
+};
+
+export const defaultTheme: Theme = {
+    name: 'snake',
+    label: 'Snake 绿',
+    description: 'Snake UI 默认明暗主题',
+    color: lightPalette,
+    darkColor: darkPalette
+};
+
+export const themes = ref<Theme[]>([defaultTheme]);
+export const currentTheme = ref<Theme>(defaultTheme);
+export const darkMode = ref<DarkMode>('light');
+export const systemDark = ref(false);
+export const color = reactive<ThemeColor>({ ...lightPalette });
+export const cssVars = ref<Record<string, string>>({});
+
+let listenersReady = false;
+let initialized = false;
+let lastCssKeys: string[] = [];
+
+const tokenNames: Record<keyof ThemeColor, string> = {
+    primary: '--snake-color-primary',
+    primaryDark: '--snake-color-primary-dark',
+    primaryDeep: '--snake-color-primary-deep',
+    primaryDeeper: '--snake-color-primary-deeper',
+    primaryDisabled: '--snake-color-primary-disabled',
+    primaryLight: '--snake-color-primary-light',
+    primaryInk: '--snake-color-primary-ink',
+    success: '--snake-color-success',
+    successDark: '--snake-color-success-dark',
+    successDisabled: '--snake-color-success-disabled',
+    successLight: '--snake-color-success-light',
+    warning: '--snake-color-warning',
+    warningDark: '--snake-color-warning-dark',
+    warningDisabled: '--snake-color-warning-disabled',
+    warningLight: '--snake-color-warning-light',
+    error: '--snake-color-error',
+    errorDark: '--snake-color-error-dark',
+    errorDisabled: '--snake-color-error-disabled',
+    errorLight: '--snake-color-error-light',
+    info: '--snake-color-info',
+    infoDark: '--snake-color-info-dark',
+    infoDisabled: '--snake-color-info-disabled',
+    infoLight: '--snake-color-info-light',
+    white: '--snake-color-white',
+    black: '--snake-color-black',
+    text: '--snake-color-text',
+    textSecondary: '--snake-color-text-secondary',
+    textMuted: '--snake-color-text-muted',
+    textLight: '--snake-color-text-light',
+    border: '--snake-color-border',
+    divider: '--snake-color-divider',
+    mask: '--snake-color-mask',
+    shadow: '--snake-color-shadow',
+    background: '--snake-color-background',
+    surface: '--snake-color-surface',
+    surfaceMuted: '--snake-color-surface-muted',
+    notice: '--snake-color-notice',
+    noticeBackground: '--snake-color-notice-background'
+};
+
+function readStorage<T>(key: string): T | undefined {
+    try {
+        if (typeof uni === 'undefined' || typeof uni.getStorageSync !== 'function') return undefined;
+        const value = uni.getStorageSync(key);
+        return value === '' || value == null ? undefined : (value as T);
+    } catch (error) {
+        if (isDebugMode('warn')) console.warn(`[Snake UI] failed to read ${key}`, error);
+        return undefined;
+    }
+}
+
+function writeStorage(key: string, value: unknown): void {
+    try {
+        if (typeof uni !== 'undefined' && typeof uni.setStorageSync === 'function') {
+            uni.setStorageSync(key, value);
+        }
+    } catch (error) {
+        if (isDebugMode('warn')) console.warn(`[Snake UI] failed to write ${key}`, error);
+    }
+}
+
+function detectSystemDark(): boolean {
+    try {
+        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+        if (typeof uni !== 'undefined' && typeof uni.getSystemInfoSync === 'function') {
+            return (uni.getSystemInfoSync() as { theme?: string }).theme === 'dark';
+        }
+    } catch (error) {
+        if (isDebugMode('warn')) console.warn('[Snake UI] failed to detect system theme', error);
+    }
+    return false;
+}
+
+function prepareListeners(): void {
+    if (listenersReady) return;
+    listenersReady = true;
+    systemDark.value = detectSystemDark();
+    try {
+        // H5 与 uni 平台分别监听系统主题；仅 auto 模式跟随变化，手动模式不被系统事件覆盖。
+        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+            const media = window.matchMedia('(prefers-color-scheme: dark)');
+            media.addEventListener?.('change', event => {
+                systemDark.value = event.matches;
+                if (darkMode.value === 'auto') applyTheme();
+            });
+        }
+        if (typeof uni !== 'undefined' && typeof uni.onThemeChange === 'function') {
+            uni.onThemeChange(event => {
+                systemDark.value = event.theme === 'dark';
+                if (darkMode.value === 'auto') applyTheme();
+            });
+        }
+    } catch (error) {
+        if (isDebugMode('warn')) console.warn('[Snake UI] failed to watch system theme', error);
+    }
+}
+
+function normalizeTheme(theme: Theme): Theme {
+    return {
+        ...theme,
+        color: { ...lightPalette, ...theme.color },
+        darkColor: { ...darkPalette, ...theme.darkColor }
+    };
+}
+
+function mergeThemes(custom: Theme[]): Theme[] {
+    const map = new Map<string, Theme>([[defaultTheme.name, defaultTheme]]);
+    custom.forEach(theme => map.set(theme.name, normalizeTheme(theme)));
+    return Array.from(map.values());
+}
+
+function activeMode(): 'light' | 'dark' {
+    if (darkMode.value === 'auto') return systemDark.value ? 'dark' : 'light';
+    return darkMode.value;
+}
+
+function toRgbTriplet(value: string): string | undefined {
+    const match = /^#([0-9a-f]{6})$/i.exec(value.trim());
+    if (!match) return undefined;
+    const hex = Number.parseInt(match[1], 16);
+    return `${(hex >> 16) & 255}, ${(hex >> 8) & 255}, ${hex & 255}`;
+}
+
+function createCssVars(theme: Theme, mode: 'light' | 'dark'): Record<string, string> {
+    const palette = (mode === 'dark' ? theme.darkColor : theme.color) as ThemeColor;
+    const result: Record<string, string> = { '--snake-theme-mode': mode };
+    Object.entries(palette).forEach(([key, value]) => {
+        const name = tokenNames[key as keyof ThemeColor];
+        if (name && value != null) {
+            result[name] = String(value);
+            const rgb = toRgbTriplet(String(value));
+            if (rgb) result[`${name}-rgb`] = rgb;
+        }
+    });
+    Object.assign(result, mode === 'dark' ? theme.darkCss : theme.css);
+    return result;
+}
+
+function flushDocument(vars: Record<string, string>, mode: 'light' | 'dark'): void {
+    if (typeof document === 'undefined' || !document.documentElement) return;
+    const root = document.documentElement;
+    // 先移除上一主题独有的变量，防止自定义 css/darkCss 在切换后残留。
+    lastCssKeys.forEach(key => root.style.removeProperty(key));
+    Object.entries(vars).forEach(([key, value]) => root.style.setProperty(key, value));
+    lastCssKeys = Object.keys(vars);
+    root.dataset.snakeThemeMode = mode;
+    root.classList.remove('snake-theme-light', 'snake-theme-dark');
+    root.classList.add(`snake-theme-${mode}`);
+}
+
+export function applyTheme(): void {
+    const mode = activeMode();
+    const palette = (mode === 'dark' ? currentTheme.value.darkColor : currentTheme.value.color) as ThemeColor | undefined;
+    Object.assign(color, mode === 'dark' ? darkPalette : lightPalette, palette || {});
+    const vars = createCssVars(currentTheme.value, mode);
+    cssVars.value = vars;
+    flushDocument(vars, mode);
+}
+
+export function initTheme(option?: ThemeOption): void {
+    prepareListeners();
+    let themeEntries: Theme[] = [];
+    let defaultThemeName = config.defaultTheme;
+    let defaultDarkMode = config.defaultDarkMode;
+    let force = false;
+
+    if (Array.isArray(option)) {
+        themeEntries = option;
+    } else if (
+        option &&
+        typeof option === 'object' &&
+        ('themes' in option || 'defaultTheme' in option || 'defaultDarkMode' in option || 'force' in option)
+    ) {
+        themeEntries = option.themes || [];
+        defaultThemeName = option.defaultTheme || defaultThemeName;
+        defaultDarkMode = option.defaultDarkMode || defaultDarkMode;
+        force = Boolean(option.force);
+    } else if (option && typeof option === 'object') {
+        themeEntries = [{ ...defaultTheme, color: { ...defaultTheme.color, ...option } }];
+    }
+
+    if (!initialized || force || themeEntries.length) themes.value = mergeThemes(themeEntries);
+    const savedTheme = force ? undefined : readStorage<string>(THEME_STORAGE_KEY);
+    const savedMode = force ? undefined : readStorage<DarkMode>(DARK_MODE_STORAGE_KEY);
+    currentTheme.value = themes.value.find(theme => theme.name === (savedTheme || defaultThemeName)) || themes.value[0];
+    darkMode.value = savedMode || defaultDarkMode;
+    initialized = true;
+    applyTheme();
+}
+
+export function setTheme(name: string): boolean {
+    const theme = themes.value.find(item => item.name === name);
+    if (!theme) return false;
+    currentTheme.value = theme;
+    writeStorage(THEME_STORAGE_KEY, name);
+    applyTheme();
+    return true;
+}
+
+export function setDarkMode(mode: DarkMode): void {
+    darkMode.value = mode;
+    writeStorage(DARK_MODE_STORAGE_KEY, mode);
+    applyTheme();
+}
+
+export function toggleDarkMode(): void {
+    setDarkMode(activeMode() === 'dark' ? 'light' : 'dark');
+}
+
+export function isDarkMode(): boolean {
+    return activeMode() === 'dark';
+}
+
+export function setThemeColor(colors: Partial<ThemeColor>): void {
+    const key = activeMode() === 'dark' ? 'darkColor' : 'color';
+    currentTheme.value = {
+        ...currentTheme.value,
+        [key]: { ...currentTheme.value[key], ...colors }
+    };
+    applyTheme();
+}
+
+export const themeStyle = computed<Record<string, string>>(() => cssVars.value);
+
+export function resetTheme(): void {
+    initialized = false;
+    themes.value = [defaultTheme];
+    currentTheme.value = defaultTheme;
+    darkMode.value = 'light';
+    systemDark.value = false;
+    applyTheme();
+}

package/libs/config/toast.ts

@@ -0,0 +1,71 @@
+/**
+ * snake-toast 函数式调用约定（事件名 + 载荷类型）。
+ * @description
+ * - useToast() 通过 emitter 派发事件
+ * - <snake-toast global /> / <snake-toast page /> 通过 emitter 监听并转调自身 show/hide
+ *
+ * 该模块放在 libs 层（而非 components），是为了让 `useToast` 组合式函数与
+ * `snake-toast` 组件共享同一套事件名与载荷，同时保持「libs 不反向依赖 components」的分层约束。
+ */
+
+// 普通（页面级）toast 事件
+export const SNAKE_TOAST_EVENT_SHOW = 'snake-ui:toast:show:';
+export const SNAKE_TOAST_EVENT_HIDE = 'snake-ui:toast:hide:';
+
+// 全局（App 根部）toast 事件，供 useToast() 使用
+export const SNAKE_TOAST_GLOBAL_EVENT_SHOW = 'snake-ui:toast:global:show';
+export const SNAKE_TOAST_GLOBAL_EVENT_HIDE = 'snake-ui:toast:global:hide';
+
+/** 根据当前页面（或显式 pageId）拼接事件名。 */
+export function getEventWithCurrentPage(event: string, page?: string | boolean): string {
+    if (page && typeof page === 'string' && page !== '') {
+        return event + page;
+    }
+    return event + getCurrentPage();
+}
+
+/** 获取当前页面路由。 */
+function getCurrentPage(): string {
+    try {
+        const pages = getCurrentPages();
+        const currentPage = pages[pages.length - 1].route as string;
+        return currentPage || '';
+    } catch {
+        return '';
+    }
+}
+
+/**
+ * snake-toast 函数式调用载荷类型。
+ * @description 与 `snake-toast` 组件的 props 对应（除 modelValue 外），`title` 兼容 `show('文本')` 的字符串形式。
+ */
+export interface ToastPayload {
+    /** 提示文本。 */
+    title?: string;
+    /** 提示类型，success/error/warning/info/primary/''（默认空，深色底白字）。 */
+    type?: string;
+    /** 显示时长，单位 ms；设为 0 或空表示常驻，需手动 close。 */
+    duration?: number;
+    /** 是否显示图标。 */
+    icon?: boolean;
+    /** 显示位置，center/top/bottom。 */
+    position?: string;
+    /** 是否以 loading 形式常驻展示。 */
+    loading?: boolean;
+    /** 根节点自定义样式。 */
+    customStyle?: string | Record<string, any> | unknown[];
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 层级 z-index。 */
+    zIndex?: number | string;
+    /** 倒计时结束后的回调。 */
+    callback?: (() => void) | null;
+    /** 倒计时结束后是否返回上一页。 */
+    back?: boolean;
+    /** 倒计时结束后跳转是否为 tab 页面。 */
+    isTab?: boolean;
+    /** 倒计时结束后跳转的 url。 */
+    url?: string;
+    /** 跳转参数对象。 */
+    params?: Record<string, any>;
+}

package/libs/config/types.ts

@@ -0,0 +1,135 @@
+export type DarkMode = 'light' | 'dark' | 'auto';
+export type DebugLevel = 'log' | 'warn' | 'error';
+
+export interface ThemeColor {
+    primary: string;
+    primaryDark: string;
+    primaryDeep: string;
+    primaryDeeper: string;
+    primaryDisabled: string;
+    primaryLight: string;
+    primaryInk: string;
+    success: string;
+    successDark: string;
+    successDisabled: string;
+    successLight: string;
+    warning: string;
+    warningDark: string;
+    warningDisabled: string;
+    warningLight: string;
+    error: string;
+    errorDark: string;
+    errorDisabled: string;
+    errorLight: string;
+    info: string;
+    infoDark: string;
+    infoDisabled: string;
+    infoLight: string;
+    white: string;
+    black: string;
+    text: string;
+    textSecondary: string;
+    textMuted: string;
+    textLight: string;
+    border: string;
+    divider: string;
+    mask: string;
+    shadow: string;
+    background: string;
+    surface: string;
+    surfaceMuted: string;
+    notice: string;
+    noticeBackground: string;
+}
+
+export interface Theme {
+    name: string;
+    label?: string;
+    description?: string;
+    color: Partial<ThemeColor>;
+    darkColor?: Partial<ThemeColor>;
+    css?: Record<string, string>;
+    darkCss?: Record<string, string>;
+}
+
+export interface ThemeConfig {
+    themes?: Theme[];
+    defaultTheme?: string;
+    defaultDarkMode?: DarkMode;
+    force?: boolean;
+}
+
+export type ThemeOption = Partial<ThemeColor> | Theme[] | ThemeConfig;
+
+export interface Locale {
+    name: string;
+    label?: string;
+    messages: Record<string, unknown>;
+}
+
+export interface LocaleConfig {
+    locales?: Locale[];
+    defaultLocale?: string;
+    force?: boolean;
+}
+
+export type LocaleOption = string | Locale[] | LocaleConfig;
+
+/** Per-request presentation and response options. */
+export interface RequestMeta {
+    loading?: boolean;
+    toast?: boolean;
+    originalData?: boolean;
+    [key: string]: unknown;
+}
+
+
+export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'TRACE' | 'CONNECT';
+
+export interface RequestOptions {
+    url: string;
+    method?: RequestMethod;
+    data?: unknown;
+    params?: Record<string, unknown>;
+    header?: Record<string, unknown>;
+    timeout?: number;
+    dataType?: string;
+    responseType?: string;
+    meta?: RequestMeta;
+    [key: string]: unknown;
+}
+
+export interface RequestResponse<T = unknown> {
+    data: T;
+    statusCode: number;
+    header?: Record<string, unknown>;
+    cookies?: string[];
+    errMsg?: string;
+    config?: RequestOptions;
+    [key: string]: unknown;
+}
+
+/** Shared request-client defaults. */
+export interface RequestConfig {
+    baseUrl?: string;
+    method?: RequestMethod;
+    header?: Record<string, unknown>;
+    timeout?: number;
+    dataType?: string;
+    responseType?: string;
+    meta?: RequestMeta;
+}
+
+
+export interface RequestInterceptor {
+    request?: (options: RequestOptions) => RequestOptions | false | Promise<RequestOptions | false>;
+    response?: <T>(response: T, config: RequestOptions) => T | false | Promise<T | false>;
+}
+
+export type RequestTransport = (options: RequestOptions) => Promise<RequestResponse | unknown>;
+
+export interface RequestSetup {
+    config?: RequestConfig;
+    interceptor?: RequestInterceptor;
+    transport?: RequestTransport;
+}

package/libs/config/zIndex.ts

@@ -0,0 +1,44 @@
+/**
+ * 组件层级数值表。
+ *
+ * 键名保持稳定，便于组件移植时直接引用；
+ * 数值以 snake-ui 组件当前生效的默认值为准。
+ */
+
+export interface ZIndexConfig {
+    /** 提示气泡层级。 */
+    toast: number;
+    /** 无网络提示层级。 */
+    noNetwork: number;
+    /** 弹窗层级（popup / actionSheet / keyboard / picker 共用）。 */
+    popup: number;
+    /** 遮罩层级。 */
+    mask: number;
+    /** 导航栏层级。 */
+    navbar: number;
+    /** 顶部提示层级。 */
+    topTips: number;
+    /** 吸顶层级。snake-sticky 当前默认 10（CMS 传 19），有意不采用 970。 */
+    sticky: number;
+    /** 索引列表锚点吸顶层级。 */
+    indexListSticky: number;
+    /** 底部标签栏层级。 */
+    tabbar: number;
+    /** 下拉菜单层级。 */
+    dropdown: number;
+}
+
+const zIndex: ZIndexConfig = {
+    toast: 10090,
+    noNetwork: 10080,
+    popup: 10075,
+    mask: 10070,
+    navbar: 980,
+    topTips: 975,
+    sticky: 10,
+    indexListSticky: 965,
+    tabbar: 998,
+    dropdown: 985
+};
+
+export default zIndex;