open-index/open-npm huggingface dataset:
npm package: @manwang/code-preview
Description: 简单的代码预览组件（Vite + Vue 3）
Latest version: 1.0.5

# @manwang/code-preview

一个基于 Vite + Vue 3 的轻量代码预览组件库。

## 安装

```bash
npm i @manwang/code-preview
# 或者
pnpm add @manwang/code-preview
# 或者
yarn add @manwang/code-preview
```

## 使用

按需引入：

```ts
import { Preview } from '@manwang/code-preview'
import '@manwang/code-preview/style.css'
```

或作为插件安装：

```ts
import { createApp } from 'vue'
import PreviewPlugin from '@manwang/code-preview'
import '@manwang/code-preview/style.css'
const app = createApp(App)
app.use(PreviewPlugin)
app.mount('#app')
```

在组件中：

```vue
<script setup lang="ts">
import { Preview } from '@manwang/code-preview'
import '@manwang/code-preview/style.css'
const codeList = [
  { filename: 'button.vue', code: '<template>\\n  <button>OK</button>\\n</template>' },
  { filename: 'utils.ts', code: 'export const add = (a:number, b:number)=>a+b' }
]
</script>

<template>
  <Preview :codeList="codeList" />
</template>
```

## Props

- `codeList: { filename: string; code: string }[]`

## 开发 & 构建

```bash
# 本地开发
npm run dev

# 构建库（含类型）
npm run build
```


> 注意：该库将 `vue` 声明为 `peerDependencies`，请确保宿主项目安装了兼容版本的 `vue@^3.3`。

## 许可证

MIT
npm package: @manwang/mobile-templates
Description: H5 页面模板集合 - 支持 soulstar、hiyoo、yoho、dramabite 等业务
Author: zackshi@micous.com
Latest version: 1.0.1

# @manwang/mobile-templates

H5 页面模板集合，为多业务项目提供标准化的页面脚手架。

## 📦 包含的业务模板

| 业务          | 模板数量 | 状态      | 说明                |
| ------------- | -------- | --------- | ------------------- |
| **soulstar**  | 1        | ✅ 已发布 | 基础页面模板 (base) |
| **hiyoo**     | -        | 🚧 待添加 | 计划中              |
| **yoho**      | -        | 🚧 待添加 | 计划中              |
| **dramabite** | -        | 🚧 待添加 | 计划中              |

## 🚀 安装

```bash
npm install @manwang/mobile-templates
# 或
pnpm add @manwang/mobile-templates
```

## 📖 使用方式

### 配合 @manwang/mcp 使用

本模板包主要配合 `@manwang/mcp` 的 `h5-page` 服务使用：

1. 安装 MCP 工具：

```bash
npm install -g @manwang/mcp
```

2. 在 Cursor 中配置 MCP：

```json
{
  "mcpServers": {
    "h5-page": {
      "command": "npx",
      "args": ["@manwang/mcp", "h5-page"]
    }
  }
}
```

3. 在对话中创建页面：

```
创建一个新页面，使用 soulstar 的 base 模板，路径为 2025/activity
```

### 直接使用模板文件

如果需要直接访问模板文件：

```javascript
import { fileURLToPath } from "url";
import path from "path";

// 获取模板目录路径
const templatesDir = path.join(
  path.dirname(fileURLToPath(import.meta.url)),
  "node_modules/@manwang/mobile-templates/templates"
);

// 读取 soulstar/base 模板
const baseTemplatePath = path.join(templatesDir, "soulstar/base");
```

## 📁 目录结构

```
@manwang/mobile-templates/
├── templates/
│   └── soulstar/
│       ├── business.json      # 业务配置
│       └── base/
│           ├── template.json  # 模板配置
│           ├── index.html     # 页面入口
│           ├── main.ts        # 应用初始化
│           ├── lang.ts        # 多语言配置
│           ├── router/        # 路由配置
│           ├── pages/         # 页面组件
│           ├── api/           # API 接口
│           └── assets/        # 静态资源
├── README.md
├── MIGRATION_GUIDE.md         # 迁移指南
└── TEMPLATE_SPEC.md           # 模板规范
```

## 🎨 soulstar/base 模板特性

### 核心功能

- ✅ **HeaderV2 组件集成** - 统一的页面标题组件
- ✅ **多语言支持** - 支持 en、ar、tr 三种语言
- ✅ **嵌套路由** - Vue Router 嵌套路由配置
- ✅ **API 占位符** - 预设的 API 请求结构
- ✅ **完整样式系统** - CSS 变量 + 全局样式
- ✅ **移动端适配** - 基于 750px 设计稿的响应式布局

### 占位符系统

模板使用占位符动态生成代码，主要占位符：

- `{{PAGE_NAME_KEBAB}}` - 页面名称（kebab-case）
- `{{COMPONENT_NAME}}` - 组件名称（PascalCase）
- `{{VAR_NAME}}` - 变量名称（camelCase）

创建页面时，这些占位符会自动替换为实际值。

## 🤝 贡献模板

如果您需要为自己的业务添加模板，请参考：

- [**MIGRATION_GUIDE.md**](./MIGRATION_GUIDE.md) - 详细的迁移步骤
- [**TEMPLATE_SPEC.md**](./TEMPLATE_SPEC.md) - 模板规范和要求

## 📝 版本历史

查看 [CHANGELOG.md](./CHANGELOG.md) 了解详细的版本变更记录。

## 📄 许可证

MIT © mico

## 🔗 相关项目

- [@manwang/mcp](https://www.npmjs.com/package/@manwang/mcp) - MCP 服务器集合