open-index/open-npm huggingface dataset:
npm package: @spruce-hub/chalk
Description: Spruce UI chalk theme
Author: Spruce FE
Latest version: 1.0.10

# Spruce Chalk

> Spruce UI 的通用样式库

如果您的项目正在使用 Spruce UI 的组件，则表明该样式库已经内置

Spruce UI 组件不是必须的，您也可以通过以下方式单独使用

## Usage

```bash
pnpm add @spruce-hub/chalk -P
```

## Quick start

```ts
import '@spruce-hub/chalk'
```

### 您还可以导入内置的 SCSS 变量、mixin 等

> Vue

```ts
// vite.config.ts
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  // ···
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@spruce-hub/chalk/scss/mixin.scss" as *;`,
      },
    },
  },
})
```

> Nuxt

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  // ···
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@spruce-hub/chalk/scss/mixin.scss" as *;',
        },
      },
    },
  },
})
```
npm package: @spruce-hub/create-cli
Description: Command line interface (CLI) for quick project creation
Author: Noah Yu
Latest version: 1.1.3

# create-cli

> Helps you quickly create out-of-the-box projects

## Usage

```bash
npm install @spruce-hub/create-cli -g
```

## Quick start

```bash
yscli create <app-name>
```

## License

[MIT](https://opensource.org/licenses/MIT)

Copyright (c) 2023-present, Spruce FE
npm package: @spruce-hub/cui
Description: 适用于 (S)CRM 平台的公共组件或模块
Author: Spruce FE
Latest version: 1.0.0-alpha.18

# Spruce CUI

> 适用于 (S)CRM 平台的公共组件或模块

## Usage

```bash
pnpm add @spruce-hub/cui -P
```

## Quick start

### Full Import

```ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import cui from '@spruce-hub/cui'

createApp(App).use(cui).mount('#app')
```

```html
<template>
  <CAlert type="success" description="success alert" closable="center" />
</template>
```

#### Volar support

```json
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@spruce-hub/cui/global"]
  }
}
```

### On-demand Import

```html
<script setup lang="ts">
  import { CAlert } from '@spruce-hub/cui'
</script>

<template>
  <CAlert type="success" description="success alert" closable="center" />
</template>
```
npm package: @spruce-hub/eui
Description: 适用于电商平台的公共组件或模块
Author: Spruce FE
Latest version: 1.0.10

# Spruce EUI

> 适用于电商平台的公共组件或模块

## Usage

```bash
pnpm add @spruce-hub/eui -P
```

## Quick start

```html
<script setup lang="ts">
import { EHeaderMenu } from '@spruce-hub/eui'
import '@spruce-hub/eui/dist/components/header-menu/style/css'
</script>

<template>
  <EHeaderMenu :navs=[{value:'菜单1', linkTo: '/menu-1'}, {value:'菜单2', linkTo: '/menu-2'}] />
</template>
```
npm package: @spruce-hub/icons
Description: 图标库
Author: Spruce FE
Latest version: 1.6.0

# Spruce Icons

> Icon library with not many icons

## Usage

```bash
pnpm add @spruce-hub/icons -P
```

## Quick start

### Full Import

```ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import icons from '@spruce-hub/icons'

createApp(App).use(icons).mount('#app')
```

```html
<template>
  <YIcon>
    <AliPay />
  </YIcon>
</template>
```

#### Volar support

```json
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@spruce-hub/icons/global"]
  }
}
```

### On-demand Import

```html
<script setup lang="ts">
  import { YIcon, AliPay } from '@spruce-hub/icons'
</script>

<template>
  <YIcon>
    <AliPay />
  </YIcon>
</template>
```
npm package: @spruce-hub/mui
Description: 适用于管理平台的公共组件或模块
Author: Spruce FE
Latest version: 1.0.0-alpha.16

# Spruce MUI

> 适用于管理平台的公共组件或模块

## Usage

```bash
pnpm add @spruce-hub/mui -P
```

## Quick start

### Full Import

```ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import mui from '@spruce-hub/mui'

createApp(App).use(mui).mount('#app')
```

```html
<template>
  <MAlert type="success" description="success alert" closable="center" />
</template>
```

#### Volar support

```json
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@spruce-hub/mui/global"]
  }
}
```

### On-demand Import

```html
<script setup lang="ts">
  import { MAlert } from '@spruce-hub/mui'
</script>

<template>
  <MAlert type="success" description="success alert" closable="center" />
</template>
```
npm package: @spruce-hub/nuxt-fetch
Description: Secure and easy http proxy integration with Nuxt.js
Author: Noah Yu
Latest version: 1.11.1

# @spruce-hub/nuxt-fetch

## Usage

```bash
npm install @spruce-hub/nuxt-fetch --save
# or
pnpm add @spruce-hub/nuxt-fetch -P
```

## Quick start

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    [
      '@spruce-hub/nuxt-fetch',
      {
        '/api': {
          pathRewrite: {
            '^/api': 'api',
          },
          apiHostEnv: 'API_HOST',
          apiHostUrl: 'http://api.com',
          cookieName: 'access_token',
        },
        '/api2': {
          pathRewrite: {
            '^/api2': '/api',
          },
          apiHostEnv: 'API_HOST',
          apiHostUrl: 'http://api2.com',
          cookieName: 'access_token',
        },
      },
    ],
  ],
})
```

```ts
const { data, pending, error, refresh } = await useFetch('/api/example')

// http://localhost/api/example => http://myapi.com/api/example
```

## License

[MIT](https://opensource.org/licenses/MIT)

Copyright (c) 2023-present, Spruce FE
npm package: @spruce-hub/nuxt-route
Description: Secure and easy route ability integration with Nuxt.js
Author: Noah Yu
Latest version: 1.11.1

# @spruce-hub/nuxt-route

> Secure and easy route ability integration with Nuxt.js

## Usage

```bash
npm install @spruce-hub/nuxt-route --save
# or
pnpm add @spruce-hub/nuxt-route -P
```

## Quick start

### Basic Configuration

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    [
      '@spruce-hub/nuxt-route',
      {
        // 需要鉴权的路由地址
        // 如果使用 `/` 结束，则包括子路由地址也需要登录才能访问
        authPath: ['/order', '/personal/'],

        // 登录页的路由地址
        loginPath: '/login',

        // 根据所提供的 name，从 cookie 中获取 value
        // 如果 value 存在，则认为当前为登录状态
        cookieName: 'access_token',

        // 登录成功之后默认重定向到上一个页面
        // 如果上一个页面的路地址由包含在其中，则直接重定向到首页
        excludePath: ['/login', '/register'],
      },
    ],
  ],
})
```

### Helper

- `useToLogin(fullPath: string, open?: '_blank'): void`

  - 记住路由地址并跳转到登录页
  - 登录成功后如果调用了 `useLoginSuccess` 将跳转到记住的地址
  - param `open` 是否新窗口(标签页)打开

- `useLoginSuccess(token: string, options?: CookieOptions | string, to?: string): void`

  - `token` 将要写入 cookie 的值， name 为 `nuxtRoute.cookieName`
  - `options` 当为 `object` 类型时，作为 `useCookie` 的 `options`；当为 `string` 类型时，作为重定向路由地址
  - `to` 重定向到该路由地址。具有最高优先级，哪怕 `options` 为 `string` 类型
  - 当 `options` 不为 `string` 类型，且 `to` 不存在时，则判断是否存在被拦截的路由地址或被 `useToLogin` 记录的路由地址，存在则重定向到被拦截的路由地址，不存在则重定向到首页
  - cookie 中的 `${nuxtRoute.cookieName}_timestamp` 记录了登录时间

- `useSaveTokenTimestamp(timestamp: string): boolean`

  - param `timestamp`： cookie 中 name 为 `${nuxtRoute.cookieName}_timestamp` 的值
  - return `false` 校验失败，已被重新登录或第一次登录，考虑是否已变更用户
  - return `true` 校验通过，本次登录仍然有效

```ts
// 记住 `/about` 路由地址并跳转到登录页
useToLogin('/about')
```

```ts
const login = (token) => {
  // options 为 useCookie 的第二个参数，用于设置 cookie 的其他属性
  const options = {
    maxAge: 3600,
  }

  useLoginSuccess(token, options)
}
```

## License

[MIT](https://opensource.org/licenses/MIT)

Copyright (c) 2023-present, Spruce FE
npm package: @spruce-hub/service-proxy
Description: Universal http proxy utils
Author: Noah Yu
Latest version: 1.2.0

# Service Proxy

> Universal http proxy utils

```js
// index.js
import { createServer } from '@spruce-hub/service-proxy'

const config = {
  sslDir: './ssl'
  path: {
    'npm.sprucefe.com': 'http://localhost:4873',
  },
}

createServer(config)
```

```bash
> node index.js

> https://npm.sprucefe.com
```

## License

[MIT](https://opensource.org/licenses/MIT)

Copyright (c) 2023-present, Spruce FE