open-index/open-npm huggingface dataset:
npm package: @origens/react-native-credit-card-input
Description: A template for building libraries with React Native using `tsdx`. Includes a bunch of config that's a pain to setup when running a local build that uses your library.
Latest version: 0.1.0

# react-native-library-tsdx

A template for building libraries with React Native using `tsdx`. Includes a bunch of config that's a pain to setup when running a local build that uses your library. 

## Example

```tsx
//  in /example/src/App.tsx:

import { MyLib } from 'my-library';

function MyApp() {
  return <MyLib />;
}
```
npm package: @origin-project/auth
Description: 本项目为前端原型项目，用于快速搭建和验证前端功能模块，基于Vue3 + Vite构建，包含基础布局、路由、状态管理及常用组件。
Latest version: 1.0.0

# Frontend Prototype

## 项目简介
本项目为前端原型项目，用于快速搭建和验证前端功能模块，基于Vue3 + Vite构建，包含基础布局、路由、状态管理及常用组件。

## 技术栈
- 框架：Vue 3（组合式API）
- 构建工具：Vite 4
- 状态管理：Pinia
- 路由：Vue Router
- CSS预处理：SCSS
- 网络请求：axios（封装在http-client.ts）
- 组件库：Element Plus（按需引入）

## 项目结构
```
frontend_prototype/
├── public/          # 静态资源（不会被Vite处理）
├── src/
│   ├── assets/      # 资源文件（图片、字体等，会被Vite处理）
│   ├── components/  # 通用组件
│   ├── features/    # 功能模块说明
│   ├── hooks/       # 自定义组合式函数
│   ├── http/        # 网络请求封装
│   ├── layout/      # 布局组件
│   ├── router/      # 路由配置
│   ├── store/       # 状态管理
│   ├── styles/      # 全局样式、变量、混合
│   ├── types/       # 类型声明
│   ├── utils/       # 工具函数
│   ├── views/       # 页面组件
│   ├── App.vue      # 根组件
│   └── main.ts      # 入口文件
├── .env*            # 环境变量配置
├── vite.config.ts   # Vite配置
└── package.json     # 依赖及脚本配置
```

## 开发指南
### 环境要求
- Node.js ≥ 16.0.0
- npm ≥ 7.0.0 或 pnpm ≥ 6.0.0

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```
访问 `http://localhost:5173` 查看效果。

### 构建生产版本
```bash
npm run build
```
产物输出到 `dist/` 目录。

### 代码规范
- 代码格式化：Prettier（通过`.prettierrc.js`配置）
- CSS规范：Stylelint（通过`.stylelintrc`配置）
- Git提交规范：推荐使用Conventional Commits格式

## I18n使用指南
项目国际化使用i8n tools插件，为配合插件使用架构层面需做以下规则；
### 格式要求
1. key的命名只支持 所在文件夹-文件名-随机号 的格式，所以为了溯源views/features层级设计上子文件夹必须用-带上上级文件夹的名字，例如：views/test/test-a1/test-a1-a2/index.vue；
2. zh_cn中提供一份基础词库，在实际项目中可根据情况在代码编写之前先行拓展；
3. 插件具有记忆能力，在zh_cn中翻译过的key会持续使用，不会生成新key；所以如果有不需要插件记忆或需要特殊处理的词条，请放在zh_cn_extra中； 
4. 原则上只允许vue文件，也就是views、features(layout、components建议手动处理)文件夹下的文件支持国际化，禁止ts文件国际化，所以ts文件原则上不允许调用类似Elmessage的组件；
5. 由于插件会检测所有中文字符串，所以在vue文件中禁止使用非必要的中文字段，比如img标签的alt属性等；

### 手动处理项
1. 提前写入项目的默认词库、专有名词词库，在extra中写入菜单及路由词库；
2. 插件会在i18n文件夹自动生成一个index.js，需要在程序运行前手动删除；
3. vue文件中script的词条替换不支持setup语法糖，需要手动处理；
在main.ts中引入i18n，在window上挂载全局方法(window as any).$t = I18n.global.t;然后整体替换this.$t为(window as any).$t;
4. vue文件html中的属性类标记可能需要手动处理，最常见的如tooltip的content，input的label等，例如：<div label="测试">，需要替换为：<div :label="$t('i18n.test')">;

### ellipsis黑科技
本项目绑定了全局的ellipsis指令，用于处理文本过长时的省略显示，使用方法如下：
<div v-ellipsis style="width:100px">这是一段很长的文本</div>;