@lumiflora/fsdk 0.1.4

package/README.md

@@ -0,0 +1,150 @@
+# @lumiflora/fsdk
+
+Vue 3 前端项目脚手架 CLI 工具，快速创建包含最佳技术栈的项目骨架。
+
+## 安装
+
+```bash
+npm install -g @lumiflora/fsdk
+```
+
+## 快速开始
+
+```bash
+# 交互式创建项目
+fsdk create
+
+# 指定参数创建
+fsdk create my-project --template full --package-manager pnpm
+```
+
+## 命令
+
+### create - 创建新项目
+
+```bash
+fsdk create [project-name] [options]
+
+Options:
+  --template <name>        模板名称 (base|full) [default: base]
+  --package-manager <pm>    包管理器 (npm|pnpm|yarn|bun) [default: pnpm]
+  --eslint                 启用 ESLint [default: true]
+  --no-git                 跳过 git 初始化
+  --no-install             跳过依赖安装
+```
+
+### add-page - 添加页面
+
+```bash
+fsdk add-page [options]
+
+Options:
+  --page-name <name>    页面名称
+  --router-path <path>  路由路径
+```
+
+### add-component - 添加组件
+
+```bash
+fsdk add-component [options]
+
+Options:
+  --name <name>    组件名称
+  --type <type>    组件类型 (page|common|business) [default: common]
+  --dir <dir>      子目录
+```
+
+### add-store - 添加状态管理
+
+```bash
+fsdk add-store [options]
+
+Options:
+  --name <name>    Store 名称
+  --type <type>    Store 类型 (pinia|redux) [default: pinia]
+```
+
+### validate - 校验配置和模板
+
+```bash
+fsdk validate [options]
+
+Options:
+  --config      仅校验配置
+  --templates   仅校验模板
+  --strict      严格校验
+```
+
+### preview - 预览模板
+
+```bash
+fsdk preview [options]
+
+Options:
+  --port <port>      端口号 [default: 3000]
+  --host <host>      主机地址 [default: localhost]
+  --open             打开浏览器
+  --template <name>  模板名称
+```
+
+### sync-template - 同步模板文件
+
+```bash
+fsdk sync-template [options]
+
+Options:
+  --template <name>    模板名称
+  --force              强制同步
+```
+
+### completion - 生成 Shell 补全
+
+```bash
+fsdk completion [shell] [options]
+
+Options:
+  --install    自动安装到 shell 配置
+
+# 示例
+fsdk completion --install    # 自动配置当前 shell
+fsdk completion zsh --install
+fsdk completion bash --install
+```
+
+## 模板
+
+| 模板 | 说明 |
+|------|------|
+| `base` | Vue 3.5 + Vite 6 基础版 |
+| `full` | Vue 3.5 + Vite 6 + Element Plus + Pinia + Vue Router + SCSS + ESLint |
+
+## 技术栈
+
+| 技术 | 版本 | 用途 |
+|------|------|------|
+| Vue | ^3.5.0 | 前端框架 |
+| Vue Router | ^4.4.0 | 路由（文件路由系统） |
+| Pinia | ^2.2.0 | 状态管理 |
+| Element Plus | ^2.8.0 | UI 组件库 |
+| Vite | ^6.0.0 | 构建工具 |
+| TypeScript | ~5.6.0 | 类型系统 |
+| ESLint | ^9.0.0 | 代码检查 |
+
+## 开发
+
+```bash
+# 本地开发
+cd packages/cli
+pnpm install
+pnpm dev
+
+# 构建
+pnpm build
+
+# 类型检查
+pnpm typecheck
+```
+
+## License
+
+MIT

package/dist/commands/add-component.d.ts

@@ -0,0 +1,7 @@
+export interface AddComponentOptions {
+    type?: 'page' | 'common' | 'business';
+    name?: string;
+    dir?: string;
+}
+export declare function addComponent(cwd: string, options?: AddComponentOptions): Promise<void>;
+//# sourceMappingURL=add-component.d.ts.map

package/dist/commands/add-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-component.d.ts","sourceRoot":"","sources":["../../src/commands/add-component.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAsB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,mBAAwB,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBhG"}

package/dist/commands/add-component.js

@@ -0,0 +1,93 @@
+import prompts from 'prompts';
+import fs from 'fs-extra';
+import path from 'path';
+import { logger, toKebabCase } from '../utils/index.js';
+export async function addComponent(cwd, options = {}) {
+    try {
+        const resolvedOptions = await resolveOptions(options);
+        const { type, name, dir } = resolvedOptions;
+        const componentDir = path.resolve(cwd, 'src', 'components', type, dir || '');
+        await fs.ensureDir(componentDir);
+        const componentTemplate = generateComponentTemplate(name, type);
+        await Promise.all([
+            fs.writeFile(path.resolve(componentDir, `${name}.vue`), componentTemplate.component),
+            fs.writeFile(path.resolve(componentDir, `${name}.less`), componentTemplate.styles),
+            fs.writeFile(path.resolve(componentDir, `index.ts`), componentTemplate.index),
+        ]);
+        logger.success(`Component ${name} created at src/components/${type}/${dir || name}/`);
+    }
+    catch (error) {
+        logger.error('Failed to add component:', error);
+        throw error;
+    }
+}
+async function resolveOptions(options) {
+    if (options.type && options.name) {
+        return {
+            type: options.type,
+            name: options.name,
+            dir: options.dir || '',
+        };
+    }
+    const responses = await prompts([
+        {
+            type: 'select',
+            name: 'type',
+            message: 'Select component type',
+            choices: [
+                { title: 'Common', value: 'common', description: 'Shared components' },
+                { title: 'Business', value: 'business', description: 'Business-specific components' },
+                { title: 'Page', value: 'page', description: 'Page-specific components' },
+            ],
+            initial: 0,
+        },
+        {
+            type: 'text',
+            name: 'name',
+            message: 'What is the component name?',
+            initial: 'my-component',
+            validate: (value) => /^[A-Z][a-zA-Z0-9]*$/.test(value) || 'Start with uppercase letter',
+        },
+        {
+            type: 'text',
+            name: 'dir',
+            message: 'Subdirectory (optional):',
+            initial: '',
+        },
+    ]);
+    return {
+        type: options.type || responses.type,
+        name: options.name || responses.name,
+        dir: options.dir || responses.dir || '',
+    };
+}
+function generateComponentTemplate(name, type) {
+    const component = `<template>
+  <div class="${toKebabCase(name)}">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: '${name}',
+  inheritAttrs: true,
+});
+</script>
+
+<style scoped lang="less">
+.${toKebabCase(name)} {
+  display: block;
+}
+</style>
+`;
+    const styles = `// ${name} component styles
+.${toKebabCase(name)} {
+  // component styles
+}
+`;
+    const index = `export { default as ${name} } from './${name}.vue';
+export type { } from './${name}.vue';
+`;
+    return { component, styles, index };
+}

package/dist/commands/add-page.d.ts

@@ -0,0 +1,8 @@
+export interface AddPageOptions {
+    routerPath?: string;
+    pageName?: string;
+    type?: 'page' | 'component';
+}
+export declare function addPage(cwd: string, options?: AddPageOptions): Promise<void>;
+export declare function syncPageRoutes(cwd: string): Promise<void>;
+//# sourceMappingURL=add-page.d.ts.map

package/dist/commands/add-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-page.d.ts","sourceRoot":"","sources":["../../src/commands/add-page.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,cAAc;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC7B;AAED,wBAAsB,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,cAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAkCtF;AA8DD,wBAAsB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAS/D"}

package/dist/commands/add-page.js

@@ -0,0 +1,98 @@
+import prompts from 'prompts';
+import fs from 'fs-extra';
+import path from 'path';
+import { logger, toPascalCase, toKebabCase } from '../utils/index.js';
+import fg from 'fast-glob';
+export async function addPage(cwd, options = {}) {
+    // Early check: if pageName is provided, verify directory doesn't exist
+    if (options.pageName) {
+        const pageDir = path.resolve(cwd, 'src', 'views', options.pageName);
+        if (fs.existsSync(pageDir)) {
+            logger.error(`Page directory ${options.pageName} already exists`);
+            throw new Error(`Page directory ${options.pageName} already exists`);
+        }
+    }
+    try {
+        const resolvedOptions = await resolveOptions(options);
+        const { pageName, routerPath } = resolvedOptions;
+        const pageDir = path.resolve(cwd, 'src', 'views', pageName);
+        if (fs.existsSync(pageDir)) {
+            logger.error(`Page directory ${pageName} already exists`);
+            throw new Error(`Page directory ${pageName} already exists`);
+        }
+        await fs.ensureDir(pageDir);
+        const pageTemplate = generatePageTemplate(pageName, routerPath);
+        await Promise.all([
+            fs.writeFile(path.resolve(pageDir, 'index.vue'), pageTemplate.page),
+            fs.writeFile(path.resolve(pageDir, 'index.less'), pageTemplate.styles),
+        ]);
+        logger.success(`Page ${pageName} created at src/views/${pageName}/`);
+        logger.info(`Router path: ${routerPath}`);
+    }
+    catch (error) {
+        logger.error('Failed to add page:', error);
+        throw error;
+    }
+}
+async function resolveOptions(options) {
+    if (options.pageName && options.routerPath) {
+        return {
+            pageName: options.pageName,
+            routerPath: options.routerPath,
+        };
+    }
+    const responses = await prompts([
+        {
+            type: 'text',
+            name: 'pageName',
+            message: 'What is the page name?',
+            initial: 'about',
+            validate: (value) => /^[a-z][a-z0-9-]*$/.test(value) || 'Start with lowercase letter, only lowercase letters, numbers, and hyphens',
+        },
+        {
+            type: 'text',
+            name: 'routerPath',
+            message: 'Enter the router path:',
+            initial: (prev) => `/${toKebabCase(prev)}`,
+        },
+    ]);
+    return {
+        pageName: options.pageName || responses.pageName,
+        routerPath: options.routerPath || responses.routerPath,
+    };
+}
+function generatePageTemplate(pageName, routerPath) {
+    const componentName = toPascalCase(pageName);
+    const page = `<template>
+  <div class="${pageName}-page">
+    <h1>${componentName}</h1>
+    <p>Router path: ${routerPath}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// ${componentName} page component
+</script>
+
+<style scoped lang="less">
+.${pageName}-page {
+  padding: 20px;
+}
+</style>
+`;
+    const styles = `// ${componentName} page styles
+.${pageName}-page {
+  min-height: 100vh;
+}
+`;
+    return { page, styles };
+}
+export async function syncPageRoutes(cwd) {
+    const viewsDir = path.resolve(cwd, 'src', 'views');
+    if (!fs.existsSync(viewsDir)) {
+        logger.warning('Views directory does not exist');
+        return;
+    }
+    const pageDirs = await fg.glob('*', { cwd: viewsDir, onlyDirectories: true });
+    logger.success(`Found ${pageDirs.length} pages to sync routes`);
+}

package/dist/commands/add-store.d.ts

@@ -0,0 +1,6 @@
+export interface AddStoreOptions {
+    name?: string;
+    type?: 'pinia' | 'redux';
+}
+export declare function addStore(cwd: string, options?: AddStoreOptions): Promise<void>;
+//# sourceMappingURL=add-store.d.ts.map

package/dist/commands/add-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-store.d.ts","sourceRoot":"","sources":["../../src/commands/add-store.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC1B;AAED,wBAAsB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,CAmBxF"}

package/dist/commands/add-store.js

@@ -0,0 +1,204 @@
+import prompts from 'prompts';
+import fs from 'fs-extra';
+import path from 'path';
+import { logger, toPascalCase } from '../utils/index.js';
+export async function addStore(cwd, options = {}) {
+    try {
+        const resolvedOptions = await resolveOptions(options);
+        const { name, type } = resolvedOptions;
+        const storeDir = path.resolve(cwd, 'src', 'stores');
+        await fs.ensureDir(storeDir);
+        const storeTemplate = generateStoreTemplate(name, type);
+        await Promise.all([
+            fs.writeFile(path.resolve(storeDir, `${name}.ts`), storeTemplate.store),
+            fs.writeFile(path.resolve(storeDir, `${name}.test.ts`), storeTemplate.test),
+        ]);
+        logger.success(`Store ${name} created at src/stores/`);
+    }
+    catch (error) {
+        logger.error('Failed to add store:', error);
+        throw error;
+    }
+}
+async function resolveOptions(options) {
+    if (options.name && options.type) {
+        return {
+            name: options.name,
+            type: options.type,
+        };
+    }
+    const responses = await prompts([
+        {
+            type: 'text',
+            name: 'name',
+            message: 'What is the store name?',
+            initial: 'user',
+            validate: (value) => /^[a-z][a-z0-9]*$/.test(value) || 'Start with lowercase letter',
+        },
+        {
+            type: 'select',
+            name: 'type',
+            message: 'Select store type',
+            choices: [
+                { title: 'Pinia', value: 'pinia', description: 'Vue 3 state management' },
+                { title: 'Redux', value: 'redux', description: 'Predictable state container' },
+            ],
+            initial: 0,
+        },
+    ]);
+    return {
+        name: options.name || responses.name,
+        type: options.type || responses.type,
+    };
+}
+function generateStoreTemplate(name, type) {
+    if (type === 'pinia') {
+        return generatePiniaTemplate(name);
+    }
+    return generateReduxTemplate(name);
+}
+function generatePiniaTemplate(name) {
+    const store = `import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const use${toPascalCase(name)}Store = defineStore('${name}', () => {
+  // State
+  const data = ref<unknown>(null);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  // Getters
+  const hasData = computed(() => data.value !== null);
+
+  // Actions
+  async function fetchData() {
+    loading.value = true;
+    error.value = null;
+    try {
+      // Replace with actual API call when implementing real data fetching
+      // Example: data.value = await api.get('/endpoint');
+      data.value = null;
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'Unknown error';
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function setData(newData: unknown) {
+    data.value = newData;
+  }
+
+  function reset() {
+    data.value = null;
+    error.value = null;
+  }
+
+  return {
+    data,
+    loading,
+    error,
+    hasData,
+    fetchData,
+    setData,
+    reset,
+  };
+});
+`;
+    const test = `import { setActivePinia, createPinia } from 'pinia';
+import { describe, it, expect, beforeEach } from 'vitest';
+import { use${toPascalCase(name)}Store } from './${name}';
+
+describe('${name} store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('should initialize with default values', () => {
+    const store = use${toPascalCase(name)}Store();
+    expect(store.data).toBeNull();
+    expect(store.loading).toBe(false);
+    expect(store.error).toBeNull();
+  });
+
+  it('should set data', () => {
+    const store = use${toPascalCase(name)}Store();
+    store.setData({ test: 'value' });
+    expect(store.data).toEqual({ test: 'value' });
+  });
+
+  it('should reset state', () => {
+    const store = use${toPascalCase(name)}Store();
+    store.setData({ test: 'value' });
+    store.reset();
+    expect(store.data).toBeNull();
+  });
+});
+`;
+    return { store, test };
+}
+function generateReduxTemplate(name) {
+    const store = `import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface ${toPascalCase(name)}State {
+  data: unknown;
+  loading: boolean;
+  error: string | null;
+}
+
+const initialState: ${toPascalCase(name)}State = {
+  data: null,
+  loading: false,
+  error: null,
+};
+
+const ${name}Slice = createSlice({
+  name: '${name}',
+  initialState,
+  reducers: {
+    setData: (state, action: PayloadAction<unknown>) => {
+      state.data = action.payload;
+    },
+    setLoading: (state, action: PayloadAction<boolean>) => {
+      state.loading = action.payload;
+    },
+    setError: (state, action: PayloadAction<string | null>) => {
+      state.error = action.payload;
+    },
+    reset: () => initialState,
+  },
+});
+
+export const { setData, setLoading, setError, reset } = ${name}Slice.actions;
+export default ${name}Slice.reducer;
+
+export const ${name}Store = configureStore({
+  reducer: {
+    ${name}: ${name}Slice.reducer,
+  },
+});
+
+export type RootState = ReturnType<typeof ${name}Store.getState>;
+export type AppDispatch = typeof ${name}Store.dispatch;
+`;
+    const test = `import { describe, it, expect } from 'vitest';
+import { ${name}Slice } from './${name}';
+
+describe('${name} slice', () => {
+  it('should return the initial state', () => {
+    expect(${name}Slice.reducer(undefined, { type: 'unknown' })).toEqual({
+      data: null,
+      loading: false,
+      error: null,
+    });
+  });
+
+  it('should handle setData', () => {
+    const actual = ${name}Slice.reducer(undefined, ${name}Slice.actions.setData({ test: 'value' }));
+    expect(actual.data).toEqual({ test: 'value' });
+  });
+});
+`;
+    return { store, test };
+}

package/dist/commands/completion.d.ts

@@ -0,0 +1,8 @@
+export type ShellType = 'bash' | 'zsh' | 'fish';
+export interface CompletionOptions {
+    shell?: ShellType;
+    output?: string;
+    install?: boolean;
+}
+export declare function generateCompletion(options?: CompletionOptions): Promise<void>;
+//# sourceMappingURL=completion.d.ts.map

package/dist/commands/completion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"completion.d.ts","sourceRoot":"","sources":["../../src/commands/completion.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoLD,wBAAsB,kBAAkB,CAAC,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CA+BvF"}