@puresnake/snake-ui 0.0.0-stage → 0.0.1

package/plugins/root/page.ts

@@ -0,0 +1,77 @@
+import { parseSFC, findNode } from './utils';
+
+/**
+ * 页面模板转换：将页面内容包裹在 <global-root-view> 中
+ *
+ * <global-root-view> 是 App.root.vue 注册的全局组件，
+ * 其模板中包含 <slot />，页面内容通过插槽传入。
+ *
+ * 处理逻辑：
+ * 1. 解析 SFC，定位 <template> 标签的起止位置
+ * 2. 提取模板内容，查找 PageMeta 节点（如有则提取到包裹层外部）
+ * 3. 将剩余内容包裹在 <global-root-view>...</global-root-view> 中
+ *
+ * 降级机制：当 vue/compiler-sfc 不可用（如 HBuilderX 项目）时，
+ * 使用正则匹配 <page-meta> 标签替代 AST 解析。
+ */
+export async function transformPage(code: string) {
+    const sfc = await parseSFC(code);
+
+    // 用正则定位 <template> 开头标签
+    const openMatch = code.match(/<template\b[^>]*>/);
+    if (!openMatch) return null;
+
+    // 使用 lastIndexOf 定位最后一个 </template>，即根 <template> 的闭合标签
+    // 避免匹配到模板内具名插槽 <template #slot> 的闭合标签
+    const closeTagStart = code.lastIndexOf('</template>');
+    if (closeTagStart === -1) return null;
+
+    const openTagEnd = openMatch.index! + openMatch[0].length;
+    const content = code.slice(openTagEnd, closeTagStart);
+
+    let pageMetaSource = '';
+    let newContent = content;
+
+    if (sfc?.template) {
+        // AST 模式：通过 vue/compiler-sfc 解析，精确定位 PageMeta 节点
+        const pageMetaNode = findNode(sfc, 'PageMeta');
+        if (pageMetaNode) {
+            pageMetaSource = pageMetaNode.loc.source;
+            const metaStart = pageMetaNode.loc.start.offset;
+            const metaEnd = pageMetaNode.loc.end.offset;
+
+            // pageMetaNode.loc 的 offset 是相对于整个文件的，转换为相对于 content 的位置
+            const metaStartInContent = metaStart - openTagEnd;
+            const metaEndInContent = metaEnd - openTagEnd;
+
+            newContent = content.slice(0, metaStartInContent) + content.slice(metaEndInContent);
+        }
+    } else {
+        // 降级模式：vue/compiler-sfc 不可用，用正则匹配 <page-meta> 标签
+        const pageMetaMatch = content.match(/<page-meta\b[^>]*>[\s\S]*?<\/page-meta>/);
+        if (pageMetaMatch) {
+            pageMetaSource = pageMetaMatch[0];
+            newContent = content.replace(pageMetaMatch[0], '');
+        } else {
+            // 也匹配自闭合的 <page-meta ... />
+            const selfClosingMatch = content.match(/<page-meta\b[^>]*\/>/);
+            if (selfClosingMatch) {
+                pageMetaSource = selfClosingMatch[0];
+                newContent = content.replace(selfClosingMatch[0], '');
+            }
+        }
+    }
+
+    // page-meta 放在包裹层外部，内容包裹在 <global-root-view> 中
+    const wrappedContent = `\n${pageMetaSource}\n<global-root-view>${newContent}</global-root-view>\n`;
+
+    return {
+        code: code.slice(0, openTagEnd) + wrappedContent + code.slice(closeTagStart),
+        map: {
+            version: 3 as const,
+            sources: [] as string[],
+            names: [] as string[],
+            mappings: ''
+        }
+    };
+}

package/plugins/root/root.ts

@@ -0,0 +1,53 @@
+/**
+ * 创建一个最小的 sourcemap，用于满足 Vite/Rollup 的 sourcemap 要求。
+ *
+ * 这是一个空映射的 sourcemap（mappings 为空字符串），不提供精确的源码映射，
+ * 但可以避免 "Sourcemap is likely to be incorrect" 警告。
+ * 调试器会回退到显示转换后的代码，不影响功能。
+ *
+ * 纯 JS 实现，无需第三方依赖。
+ */
+function createEmptySourcemap() {
+    return {
+        version: 3 as const,
+        sources: [] as string[],
+        names: [] as string[],
+        mappings: ''
+    };
+}
+
+/**
+ * 向 main.ts 注入 App.root.vue 的导入和全局注册
+ *
+ * 流程：
+ * 1. 在文件顶部插入 `import GlobalRootView from "./App.root.vue"`
+ * 2. 在 createSSRApp 之后插入 `app.component("global-root-view", GlobalRootView)`
+ *
+ * 注：GlobalRootView 仅为 main.ts 中的局部变量名，
+ *     实际组件就是 App.root.vue，页面通过 <global-root-view> 标签使用。
+ */
+export function registerRootApp(code: string, fileName: string = 'App.root') {
+    const importCode = `import GlobalRootView from "./${fileName}.vue";`;
+    const vueUseComponentCode = `app.component("global-root-view", GlobalRootView);`;
+
+    let newCode = importCode + '\n' + code;
+
+    // 在 createSSRApp 赋值语句之后插入组件注册代码
+    const ssrAppMatch = newCode.match(/(const\s+app\s*=\s*createSSRApp\([^)]+\);)/);
+    if (ssrAppMatch) {
+        newCode = newCode.replace(/(const\s+app\s*=\s*createSSRApp\([^)]+\);)/, `$1\n    ${vueUseComponentCode}`);
+    } else {
+        // 兜底：在 return { 之前插入
+        newCode = newCode.replace(/(createApp[\s\S]*?)(return\s*\{)/, `$1${vueUseComponentCode}\n    $2`);
+    }
+
+    return { code: newCode, map: createEmptySourcemap() };
+}
+
+/**
+ * App.root.vue 模板中已使用 <slot /> 作为子内容插槽，
+ * 无需替换，直接透传。
+ */
+export function rebuildRootApp(code: string) {
+    return { code, map: createEmptySourcemap() };
+}

package/plugins/root/utils.ts

@@ -0,0 +1,137 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { normalizePath } from 'vite';
+
+/**
+ * Parse Vue SFC file, return descriptor
+ *
+ * When vue/compiler-sfc is not available (e.g. HBuilderX projects where
+ * vue is not in node_modules), returns null instead of throwing.
+ * Callers should fall back to regex-based matching.
+ */
+export async function parseSFC(code: string) {
+    try {
+        const { parse } = await import('vue/compiler-sfc');
+        return parse(code, { pad: 'space' }).descriptor;
+    } catch {
+        return null;
+    }
+}
+
+/**
+ * Strip JSON comments (single-line and multi-line)
+ */
+export function stripJsonComments(str: string): string {
+    return str.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');
+}
+
+/**
+ * Convert pages.json path to absolute file path
+ */
+export function formatPagePath(root: string, path: string) {
+    return normalizePath(`${join(root, path)}.vue`).replace(/^[A-Z]:/, match => match.toLowerCase());
+}
+
+/**
+ * Load pages.json and resolve all page paths (main + subPackages)
+ */
+export function loadPagesJson(path: string, rootPath: string): string[] {
+    const raw = readFileSync(path, 'utf-8');
+    const { pages = [], subPackages = [] } = JSON.parse(stripJsonComments(raw));
+
+    return [
+        ...pages.map((page: any) => formatPagePath(rootPath, page.path)),
+        ...subPackages
+            .map(({ pages: subPages = [], root = '' }: any) => {
+                return subPages.map((page: any) => formatPagePath(join(rootPath, root), page.path));
+            })
+            .flat()
+    ];
+}
+
+/**
+ * camelCase to kebab-case: PageMeta -> page-meta
+ */
+export function toKebabCase(str: string) {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/[_\s]+/g, '-')
+        .toLowerCase();
+}
+
+/**
+ * kebab-case to PascalCase: page-meta -> PageMeta
+ */
+export function toPascalCase(str: string) {
+    return str.replace(/(^\w|-+\w)/g, match => match.toUpperCase().replace(/-/g, ''));
+}
+
+interface TagNode {
+    loc: {
+        source: string;
+        start: { offset: number };
+        end: { offset: number };
+    };
+}
+
+/**
+ * Find a tag node in SFC template AST by tag name
+ * Supports both kebab-case and PascalCase
+ */
+export function findNode(sfc: any, rawTagName: string): TagNode | undefined {
+    const templateSource = sfc.template?.content;
+    if (!templateSource) return;
+
+    let tagName = '';
+    if (templateSource.includes(`<${toKebabCase(rawTagName)}`)) {
+        tagName = toKebabCase(rawTagName);
+    } else if (templateSource.includes(`<${toPascalCase(rawTagName)}`)) {
+        tagName = toPascalCase(rawTagName);
+    }
+
+    if (!tagName) return;
+
+    const nodeAst = sfc.template?.ast;
+    if (!nodeAst) return;
+
+    // Recursively traverse AST to find the target node
+    const traverse = (nodes: any): TagNode | undefined => {
+        for (const node of nodes) {
+            if (node.type === 1) {
+                if (node.tag === tagName) return node;
+                if (node.children?.length) {
+                    const found = traverse(node.children);
+                    if (found) return found;
+                }
+            }
+        }
+        return undefined;
+    };
+
+    return traverse(nodeAst.children);
+}
+
+/**
+ * Normalize platform-specific page paths (.mp-weixin.vue -> .vue)
+ */
+export function normalizePlatformPath(id: string) {
+    const platform = process.env.UNI_PLATFORM;
+    if (!platform) return id;
+
+    const regex = new RegExp(`\\.${platform}\\.vue$`);
+    if (regex.test(id)) {
+        return id.replace(`.${platform}.`, '.');
+    }
+    return id;
+}
+
+/**
+ * Debounce utility
+ */
+export function debounce<T extends (...args: any[]) => void>(fn: T, delay: number) {
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    return (...args: Parameters<T>) => {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), delay);
+    };
+}

package/readme.md

@@ -0,0 +1,79 @@
+# Snake UI
+
+Snake UI 是面向 uni-app 商城与 CMS 场景的 Vue 3 组件库，支持 H5、微信小程序和 App。
+
+## 安装
+
+```bash
+pnpm add @puresnake/snake-ui
+```
+
+在 `main.ts` 安装组件库，并按业务需要传入适配器：
+
+```ts
+import SnakeUI from '@puresnake/snake-ui';
+
+app.use(SnakeUI, {
+    theme: { defaultDarkMode: 'auto' },
+    locale: { defaultLocale: 'zh-CN' },
+    http: { config: { baseUrl: '/api' } },
+    request: { get, post },
+    cache: { get, set, delete: remove },
+    config: { baseUrl: '/api' }
+});
+```
+
+Snake UI 不依赖其他 UI 组件库，不需要额外导入第三方主题样式。底座内置 Snake 绿色明暗主题、`zh-CN` / `en-US`、基于 `uni.request` 的 HTTP 客户端和常用 hooks / 工具。
+
+```ts
+import { http, setDarkMode, setLocale } from '@puresnake/snake-ui';
+
+setDarkMode('auto');
+setLocale('en-US');
+const data = await http.get('/goods');
+```
+
+如需统一覆盖品牌色、文字色和圆角，可在应用入口导入可选主题变量：
+
+```scss
+@import '@puresnake/snake-ui/theme.scss';
+
+:root,
+page {
+    --snake-color-primary: #06d290;
+}
+```
+
+## easycom
+
+```json
+{
+    "easycom": {
+        "autoscan": true,
+        "custom": {
+            "^snake-(.*)": "@puresnake/snake-ui/components/snake-$1/snake-$1.vue"
+        }
+    }
+}
+```
+
+```vue
+<snake-button type="primary">确定</snake-button>
+<snake-popup v-model="visible" mode="bottom">...</snake-popup>
+```
+
+## 手动导入
+
+组件推荐使用 easycom 标签；如需手动导入，按组件路径引入：
+
+```ts
+import Button from '@puresnake/snake-ui/components/snake-button/snake-button.vue';
+import type { ButtonProps, PopupMode } from '@puresnake/snake-ui';
+import { addUnit, navTo, sleep, toast } from '@puresnake/snake-ui/libs';
+```
+
+## 公开基础组件
+
+`snake-icon`、`snake-popup`、`snake-overlay`、`snake-button`、`snake-image`、`snake-tabs`、`snake-sticky`、`snake-notice-bar`、`snake-loadmore`、`snake-empty`、`snake-swiper`、`snake-button-sort`、`snake-drop-menu`、`snake-drop-menu-item`、`snake-index-list`、`snake-index-list-panel`、`snake-index-anchor`、`snake-form`、`snake-form-item`、`snake-input`、`snake-textarea`、`snake-checkbox`、`snake-checkbox-group`、`snake-radio`、`snake-radio-group`、`snake-switch`、`snake-slider`。
+
+CMS 商品、优惠券和跳转能力通过 `app.use(SnakeUI, { cms: { services: ... } })` 显式注入。纯展示 CMS 不要求请求适配器。

package/theme.scss

@@ -0,0 +1,118 @@
+/* Snake UI theme tokens. Import from uni.scss for SCSS variables. */
+/* 品牌绿七档自有体系 + 语义色与中性色默认主题 */
+:root,
+page {
+    --snake-color-primary: #06d290;
+    --snake-color-primary-rgb: 6, 210, 144;
+    --snake-color-primary-dark: #2ebd7c;
+    --snake-color-primary-dark-rgb: 46, 189, 124;
+    --snake-color-primary-deep: #26273a;
+    --snake-color-primary-deep-rgb: 38, 39, 58;
+    --snake-color-primary-deeper: #22242e;
+    --snake-color-primary-deeper-rgb: 34, 36, 46;
+    --snake-color-primary-disabled: #a6ebd3;
+    --snake-color-primary-light: #eeffe0;
+    --snake-color-primary-light-rgb: 238, 255, 224;
+    --snake-color-primary-ink: #ffffff;
+    --snake-color-success: #19be6b;
+    --snake-color-success-rgb: 25, 190, 107;
+    --snake-color-success-dark: #18b566;
+    --snake-color-success-disabled: #71d5a1;
+    --snake-color-success-light: #dbf1e1;
+    --snake-color-warning: #ff9900;
+    --snake-color-warning-rgb: 255, 153, 0;
+    --snake-color-warning-dark: #f29100;
+    --snake-color-warning-disabled: #fcbd71;
+    --snake-color-warning-light: #fdf6ec;
+    --snake-color-error: #fa3534;
+    --snake-color-error-rgb: 250, 53, 52;
+    --snake-color-error-dark: #dd6161;
+    --snake-color-error-disabled: #fab6b6;
+    --snake-color-error-light: #fef0f0;
+    --snake-color-info: #909399;
+    --snake-color-info-rgb: 144, 147, 153;
+    --snake-color-info-dark: #82848a;
+    --snake-color-info-disabled: #c8c9cc;
+    --snake-color-info-light: #f4f4f5;
+    --snake-color-white: #ffffff;
+    --snake-color-black: #000000;
+    --snake-color-text: #303133;
+    --snake-color-text-rgb: 48, 49, 51;
+    --snake-color-text-secondary: #606266;
+    --snake-color-text-secondary-rgb: 96, 98, 102;
+    --snake-color-text-muted: #909399;
+    --snake-color-text-light: #c0c4cc;
+    --snake-color-border: #dcdfe6;
+    --snake-color-border-rgb: 220, 223, 230;
+    --snake-color-divider: #e4e7ed;
+    --snake-color-mask: rgba(0, 0, 0, 0.4);
+    --snake-color-shadow: rgba(0, 0, 0, 0.1);
+    --snake-color-background: #f6f6f6;
+    --snake-color-surface: #ffffff;
+    --snake-color-surface-rgb: 255, 255, 255;
+    --snake-color-surface-muted: #f1f1f1;
+    --snake-color-disabled-bg: #f1f1f1;
+    --snake-color-form-error: #fa3534;
+    --snake-control-height-small: 64rpx;
+    --snake-control-height: 80rpx;
+    --snake-control-height-large: 92rpx;
+    --snake-color-notice: #ff9900;
+    --snake-color-notice-background: #fdf6ec;
+    --snake-radius-small: 8rpx;
+    --snake-radius-base: 12rpx;
+    --snake-radius-large: 20rpx;
+    --snake-duration-fast: 180ms;
+    --snake-duration-base: 300ms;
+    --snake-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+    --snake-z-index-overlay: 10070;
+    --snake-z-index-popup: 10075;
+}
+
+$snake-color-primary: var(--snake-color-primary) !default;
+$snake-color-primary-dark: var(--snake-color-primary-dark) !default;
+$snake-color-primary-deep: var(--snake-color-primary-deep) !default;
+$snake-color-primary-deeper: var(--snake-color-primary-deeper) !default;
+$snake-color-primary-disabled: var(--snake-color-primary-disabled) !default;
+$snake-color-primary-light: var(--snake-color-primary-light) !default;
+$snake-color-primary-ink: var(--snake-color-primary-ink) !default;
+$snake-color-success: var(--snake-color-success) !default;
+$snake-color-success-dark: var(--snake-color-success-dark) !default;
+$snake-color-success-disabled: var(--snake-color-success-disabled) !default;
+$snake-color-success-light: var(--snake-color-success-light) !default;
+$snake-color-warning: var(--snake-color-warning) !default;
+$snake-color-warning-dark: var(--snake-color-warning-dark) !default;
+$snake-color-warning-disabled: var(--snake-color-warning-disabled) !default;
+$snake-color-warning-light: var(--snake-color-warning-light) !default;
+$snake-color-error: var(--snake-color-error) !default;
+$snake-color-error-dark: var(--snake-color-error-dark) !default;
+$snake-color-error-disabled: var(--snake-color-error-disabled) !default;
+$snake-color-error-light: var(--snake-color-error-light) !default;
+$snake-color-info: var(--snake-color-info) !default;
+$snake-color-info-dark: var(--snake-color-info-dark) !default;
+$snake-color-info-disabled: var(--snake-color-info-disabled) !default;
+$snake-color-info-light: var(--snake-color-info-light) !default;
+$snake-color-white: var(--snake-color-white) !default;
+$snake-color-black: var(--snake-color-black) !default;
+$snake-color-text: var(--snake-color-text) !default;
+$snake-color-text-secondary: var(--snake-color-text-secondary) !default;
+$snake-color-text-muted: var(--snake-color-text-muted) !default;
+$snake-color-text-light: var(--snake-color-text-light) !default;
+$snake-color-border: var(--snake-color-border) !default;
+$snake-color-divider: var(--snake-color-divider) !default;
+$snake-color-mask: var(--snake-color-mask) !default;
+$snake-color-shadow: var(--snake-color-shadow) !default;
+$snake-color-background: var(--snake-color-background) !default;
+$snake-color-surface: var(--snake-color-surface) !default;
+$snake-color-surface-muted: var(--snake-color-surface-muted) !default;
+$snake-color-disabled-bg: var(--snake-color-disabled-bg) !default;
+$snake-color-form-error: var(--snake-color-form-error) !default;
+$snake-color-notice: var(--snake-color-notice) !default;
+$snake-color-notice-background: var(--snake-color-notice-background) !default;
+$snake-radius-small: 8rpx !default;
+$snake-radius-base: 12rpx !default;
+$snake-radius-large: 20rpx !default;
+$snake-duration-fast: 180ms !default;
+$snake-duration-base: 300ms !default;
+$snake-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1) !default;
+$snake-z-index-overlay: 10070 !default;
+$snake-z-index-popup: 10075 !default;