chore(projects): release v1.0.0-beta.2

fix(components): fix homeTab closeRight and disable colseLeft

.cz-config.js

@@ -1,45 +0,0 @@
-module.exports = {
-  types: [
-    { value: 'feat', name: 'feat:     新增功能' },
-    { value: 'fix', name: 'fix:      修复bug' },
-    { value: 'docs', name: 'docs:     文档变更' },
-    { value: 'style', name: 'style:    代码格式（不影响功能，例如空格、分号等格式修正）' },
-    { value: 'refactor', name: 'refactor: 代码重构（不包括 bug 修复、功能新增）' },
-    { value: 'perf', name: 'perf:     性能优化' },
-    { value: 'test', name: 'test:     添加、修改测试用例' },
-    { value: 'build', name: 'build:    构建流程、外部依赖变更（如升级 npm 包、修改 脚手架 配置等）' },
-    { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
-    { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
-    { value: 'revert', name: 'revert:   回滚 commit' }
-  ],
-  scopes: [
-		['projects', '项目搭建'],
-    ['components', '组件相关'],
-    ['hooks', 'hook 相关'],
-    ['utils', 'utils 相关'],
-    ['types', 'ts类型相关'],
-    ['styles', '样式相关'],
-    ['deps', '项目依赖'],
-    ['auth', '对 auth 修改'],
-    ['other', '其他修改'],
-    ['custom', '以上都不是？我要自定义']
-  ].map(([value, description]) => {
-    return {
-      value,
-      name: `${value.padEnd(30)} (${description})`
-    }
-  }),
-  messages: {
-    type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：',
-    scope: '\n选择一个 scope（可选）：',
-    customScope: '请输入自定义的 scope：',
-    subject: '填写简短精炼的变更描述：\n',
-    body: '填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
-    breaking: '列举非兼容性重大的变更（可选）：\n',
-    footer: '列举出所有变更的 ISSUES CLOSED（可选）。 例如: #31, #34：\n',
-    confirmCommit: '确认提交？'
-  },
-  allowBreakingChanges: ['feat', 'fix'],
-  subjectLimit: 100,
-  breaklineChar: '|'
-}

.editorconfig

@@ -1,12 +1,11 @@
 # Editor configuration, see http://editorconfig.org
 
-# 表示是最顶层的 EditorConfig 配置文件
 root = true
 
-[*] # 表示所有文件适用
-charset = utf-8 # 设置文件字符集为 utf-8
-indent_style = tab # 缩进风格（tab | space）
-indent_size = 2 # 缩进大小
-end_of_line = lf # 控制换行类型(lf | cr | crlf)
-trim_trailing_whitespace = true # 去除行首的任意空白字符
-insert_final_newline = true # 始终在文件末尾插入一个新行
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true

.env

@@ -1,5 +1,42 @@
-# 变量需要以VITE开头
+VITE_BASE_URL=/
 
 VITE_APP_TITLE=SoybeanAdmin
-VITE_APP_TITLE_LABEL=SoybeanAdmin
-VITE_BASE_URL=/
+
+VITE_APP_DESC=SoybeanAdmin is a fresh and elegant admin template
+
+# the prefix of the icon name
+VITE_ICON_PREFIX=icon
+
+# the prefix of the local svg icon component, must include VITE_ICON_PREFIX
+# format {VITE_ICON_PREFIX}-{local icon name}
+VITE_ICON_LOCAL_PREFIX=icon-local
+
+# auth route mode: static ｜ dynamic
+VITE_AUTH_ROUTE_MODE=static
+
+# static auth route home
+VITE_ROUTE_HOME=home
+
+# default menu icon
+VITE_MENU_ICON=mdi:menu
+
+# whether to enable http proxy when is dev mode
+VITE_HTTP_PROXY=Y
+
+# vue-router mode: hash | history | memory
+VITE_ROUTER_HISTORY_MODE=history
+
+# success code of backend service, when the code is received, the request is successful
+VITE_SERVICE_SUCCESS_CODE=0000
+
+# logout codes of backend service, when the code is received, the user will be logged out and redirected to login page
+VITE_SERVICE_LOGOUT_CODES=8888,8889
+
+# modal logout codes of backend service, when the code is received, the user will be logged out by displaying a modal
+VITE_SERVICE_MODAL_LOGOUT_CODES=7777,7778
+
+# token expired codes of backend service, when the code is received, it will refresh the token and resend the request
+VITE_SERVICE_EXPIRED_TOKEN_CODES=9999,9998
+
+# when the route mode is static, the defined super role
+VITE_STATIC_SUPER_ROLE=R_SUPER

.env.development

@@ -1,4 +0,0 @@
-#请求的环境
-VITE_HTTP_ENV=DEV
-#请求地址
-VITE_HTTP_URL=http://192.168.100.57/

.env.prod

@@ -0,0 +1,7 @@
+# backend service base url, prod environment
+VITE_SERVICE_BASE_URL=https://mock.apifox.com/m1/3109515-0-default
+
+# other backend service base url, prod environment
+VITE_OTHER_SERVICE_BASE_URL= `{
+  "demo": "http://localhost:9529"
+}`

.env.production

@@ -1,4 +0,0 @@
-#请求的环境 正式环境
-VITE_HTTP_ENV=PROD
-#请求地址
-VITE_HTTP_URL=http://119.23.220.176:17321

.env.staging

@@ -1,3 +0,0 @@
-VITE_HTTP_ENV=STAGING
-#请求地址
-VITE_HTTP_URL=http://119.23.220.176:17321

.env.test

@@ -0,0 +1,7 @@
+# backend service base url, test environment
+VITE_SERVICE_BASE_URL=https://mock.apifox.com/m1/3109515-0-default
+
+# other backend service base url, test environment
+VITE_OTHER_SERVICE_BASE_URL= `{
+  "demo": "http://localhost:9528"
+}`

.eslintignore

@@ -1,14 +0,0 @@
-*.sh
-node_modules
-lib
-*.md
-*.woff
-*.ttf
-.vscode
-.idea
-/dist/
-/mock/
-/public
-/docs
-.vscode
-.local

.eslintrc.js

@@ -1,52 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true
-  },
-  globals: {
-    defineProps: 'readonly',
-    defineEmits: 'readonly',
-    defineExpose: 'readonly',
-    withDefaults: 'readonly',
-    PROJECT_BUILD_TIME: 'readonly',
-    AMap: 'readonly',
-    BMap: 'readonly',
-    TMap: 'readonly'
-  },
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    ecmaVersion: 12,
-    parser: '@typescript-eslint/parser',
-    sourceType: 'module'
-  },
-  plugins: ['vue', '@typescript-eslint'],
-  extends: [
-    'plugin:vue/vue3-recommended',
-    'airbnb-base',
-    '@vue/typescript/recommended',
-    'plugin:prettier/recommended',
-    '@vue/prettier/@typescript-eslint'
-  ],
-  rules: {
-    'no-unused-vars': 'off',
-    'import/extensions': 'off',
-    'import/no-extraneous-dependencies': 'off',
-    'import/no-unresolved': 0,
-    'no-shadow': 0,
-    'import/prefer-default-export': 0,
-    'no-use-before-define': 'off',
-    'vue/multi-word-component-names': 0,
-    'max-classes-per-file': 0,
-    '@typescript-eslint/no-explicit-any': 0,
-    '@typescript-eslint/no-inferrable-types': 0,
-    '@typescript-eslint/ban-ts-ignore': 'off',
-    '@typescript-eslint/ban-types': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/no-unused-vars': ['warn', { ignoreRestSiblings: true }],
-    '@typescript-eslint/no-use-before-define': ['error', { classes: true, functions: false, typedefs: false }]
-  }
-};

.github/ISSUE_TEMPLATE/bug-report_cn.yaml

@@ -0,0 +1,90 @@
+name: Bug提交
+description: 在使用软件或功能的过程中遇到了错误
+title: '[Bug]: '
+labels: [ "bug?" ]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## 请按照以下要求进行提交
+        ### 1. 提交后需要指定标签和截止时间。
+        ---
+
+  - type: markdown
+    attributes:
+      value: |
+        ## 环境信息
+        请根据实际使用环境修改以下信息。
+
+  - type: input
+    id: env-program-ver
+    attributes:
+      label: 软件版本
+    validations:
+      required: true
+
+  - type: dropdown
+    id: env-vm-ver
+    attributes:
+      label: 运行环境
+      description: 选择运行软件的系统版本
+      options:
+        - Windows (64)
+        - Windows (32/x84)
+        - MacOS
+        - Linux
+        - Ubuntu
+        - CentOS
+        - ArchLinux
+        - UNIX (Android)
+        - 其它（请在下方说明）
+    validations:
+      required: true
+
+  - type: dropdown
+    id: env-vm-arch
+    attributes:
+      label: 运行架构
+      description: (可选) 选择运行软件的系统架构
+      options:
+        - AMD64
+        - x86
+        - ARM [32] (别名：AArch32 / ARMv7）
+        - ARM [64] (别名：AArch64 / ARMv8）
+        - 其它
+
+  - type: textarea
+    id: reproduce-steps
+    attributes:
+      label: 重现步骤
+      description: |
+        我们需要执行哪些操作才能让 bug 出现？
+        简洁清晰的重现步骤能够帮助我们更迅速地定位问题所在。
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: 期望的结果是什么？
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual
+    attributes:
+      label: 实际的结果是什么？
+    validations:
+      required: true
+
+  - type: textarea
+    id: logging
+    attributes:
+      label: 日志记录（可选）
+      render: golang
+
+  - type: textarea
+    id: extra-desc
+    attributes:
+      label: 补充说明（可选）

.github/ISSUE_TEMPLATE/bug-report_en.yaml

@@ -0,0 +1,90 @@
+name: Bug Report
+description: Encountered an error while using the software or feature
+title: '[Bug]: '
+labels: [ "bug?" ]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ## Please submit according to the following requirements
+        ### 1. After submission, you need to specify the label and deadline.
+        ---
+
+  - type: markdown
+    attributes:
+      value: |
+        ## Environment Information
+        Please modify the following information according to the actual usage environment.
+
+  - type: input
+    id: env-program-ver
+    attributes:
+      label: Software Version
+    validations:
+      required: true
+
+  - type: dropdown
+    id: env-vm-ver
+    attributes:
+      label: Operating Environment
+      description: Select the system version on which the software is running
+      options:
+        - Windows (64)
+        - Windows (32/x84)
+        - MacOS
+        - Linux
+        - Ubuntu
+        - CentOS
+        - ArchLinux
+        - UNIX (Android)
+        - Other (please specify below)
+    validations:
+      required: true
+
+  - type: dropdown
+    id: env-vm-arch
+    attributes:
+      label: Operating Architecture
+      description: (Optional) Select the system architecture on which the software is running
+      options:
+        - AMD64
+        - x86
+        - ARM [32] (Alias：AArch32 / ARMv7）
+        - ARM [64] (Alias：AArch64 / ARMv8）
+        - Other
+
+  - type: textarea
+    id: reproduce-steps
+    attributes:
+      label: Reproduce Steps
+      description: |
+        What operations do we need to perform to make the bug appear?
+        The concise and clear reproduction steps can help us locate the problem more quickly.
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: What is the expected result?
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual
+    attributes:
+      label: What is the actual result?
+    validations:
+      required: true
+
+  - type: textarea
+    id: logging
+    attributes:
+      label: Logging (Optional)
+      render: golang
+
+  - type: textarea
+    id: extra-desc
+    attributes:
+      label: Additional Description (Optional)

.github/PULL_REQUEST_TEMPLATE/pr_cn.md

@@ -0,0 +1,50 @@
+首先，感谢你的贡献！ 😄
+
+新特性请提交至 feature 分支，其余可提交至 main 分支。在一个维护者审核通过后合并。请确保填写以下 pull request 的信息，谢谢！~
+
+[[English Template / 英文模板](./pr_en.md)]
+
+### 这个变动的性质是
+
+- [ ] 新特性提交
+- [ ] 日常 bug 修复
+- [ ] 站点、文档改进
+- [ ] 组件样式改进
+- [ ] TypeScript 定义更新
+- [ ] 重构
+- [ ] 代码风格优化
+- [ ] 分支合并
+- [ ] 其他改动（是关于什么的改动？）
+
+### 需求背景
+
+> 1. 描述相关需求的来源。
+> 2. 要解决的问题。
+> 3. 相关的 issue 讨论链接。
+
+### 实现方案和 API（非新功能可选）
+
+> 1. 基本的解决思路和其他可选方案。
+> 2. 列出最终的 API 实现和用法。
+> 3. 涉及 UI/交互变动需要有截图或 GIF。
+
+### 对用户的影响和可能的风险（非新功能可选）
+
+> 1. 这个改动对用户端是否有影响？影响的方面有哪些？
+> 2. 是否有可能隐含的 break change 和其他风险？
+
+### Changelog 描述（非新功能可选）
+
+> 1. 英文描述
+> 2. 中文描述（可选）
+
+### 请求合并前的自查清单
+
+- [ ] 文档已补充或无须补充
+- [ ] 代码演示已提供或无须提供
+- [ ] TypeScript 定义已补充或无须补充
+- [ ] Changelog 已提供或无须提供
+
+### 后续计划（非新功能可选）
+
+> 如果这个提交后面还有相关的其他提交和跟进信息，可以写在这里。

.github/PULL_REQUEST_TEMPLATE/pr_en.md

@@ -0,0 +1,51 @@
+First of all, thank you for your contribution! 😄
+
+New feature please send pull request to feature branch, and rest to main branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!
+
+[[中文版模板 / Chinese template](./pr_cn.md)]
+
+### This is a ...
+
+- [ ] New feature
+- [ ] Bug fix
+- [ ] Site / document update
+- [ ] Component style update
+- [ ] TypeScript definition update
+- [ ] Refactoring
+- [ ] Code style optimization
+- [ ] Branch merge
+- [ ] Other (about what?)
+
+### What's the background?
+
+> 1. Describe the source of requirement.
+> 2. Resolve what problem.
+> 3. Related issue link.
+
+### API Realization (Optional if not new feature)
+
+> 1. Basic thought of solution and other optional proposal.
+> 2. List final API realization and usage sample.
+> 3. GIF or snapshot should be provided if includes UI/interactive modification.
+
+### What's the effect? (Optional if not new feature)
+
+> 1. Does this PR affect user? Which part will be affected?
+> 2. What will say in changelog?
+> 3. Does this PR contains potential break change or other risk?
+
+### Changelog description (Optional if not new feature)
+
+> 1. English description
+> 2. Chinese description (optional)
+
+### Self Check before Merge
+
+- [ ] Doc is updated/provided or not needed
+- [ ] Demo is updated/provided or not needed
+- [ ] TypeScript definition is updated/provided or not needed
+- [ ] Changelog is provided or not needed
+
+### Additional Plan? (Optional if not new feature)
+
+> If this PR related with other PR or following info. You can type here.

.github/workflows/linter.yml

@@ -0,0 +1,30 @@
+---
+name: Lint Code
+
+permissions:
+  contents: write
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  lint:
+    name: Lint All Code
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Lint Code Base
+        uses: github/super-linter@v4
+        env:
+          VALIDATE_ALL_CODEBASE: false
+          DEFAULT_BRANCH: main
+          # To change branch master or main
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          FILTER_REGEX_EXCLUDE: (docs|.github)
+          VALIDATE_MARKDOWN: false

.github/workflows/release.yml

@@ -0,0 +1,25 @@
+name: Release
+
+permissions:
+  contents: write
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - run: npx githublogen
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -1,7 +1,35 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
 .DS_Store
 dist
 dist-ssr
+coverage
 *.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+!.vscode/launch.json
 .idea
-stats.html
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+package-lock.json
+yarn.lock
+
+.VSCodeCounter

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install commitlint --edit

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-pnpm lint:fix

.npmrc

@@ -0,0 +1,3 @@
+registry=https://registry.npmmirror.com/
+shamefully-hoist=true
+ignore-workspace-root-check=true

.prettierrc.js

@@ -1,19 +0,0 @@
-module.exports = {
-  printWidth: 120, // 超过最大值换行
-  tabWidth: 2, // 缩进字节数
-  useTabs: false, // 缩进使用tab，不使用空格
-  semi: true, // 句尾添加分号
-  singleQuote: true, // 使用单引号代替双引号
-  proseWrap: 'preserve', // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
-  arrowParens: 'avoid', //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
-  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
-  endOfLine: 'auto', // 结尾是 \n \r \n\r auto
-  eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
-  htmlWhitespaceSensitivity: 'ignore', // 指定HTML文件的全局空白区域敏感度 有效选项："css"- 遵守CSS display属性的默认值。"strict" - 空格被认为是敏感的。"ignore" - 空格被认为是不敏感的。html 中空格也会占位，影响布局，prettier 格式化的时候可能会将文本换行，造成布局错乱
-  ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
-  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
-  requireConfig: false, // Require a 'prettierconfig' to format prettier
-  stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
-  trailingComma: 'none', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
-  tslintIntegration: false // 不让prettier使用tslint的代码格式进行校验
-}

.vscode/extensions.json

@@ -1,34 +1,22 @@
 {
-	"recommendations": [
-		"formulahendry.auto-close-tag",
-		"formulahendry.auto-complete-tag",
-		"steoates.autoimport",
-		"formulahendry.auto-rename-tag",
-		"coenraads.bracket-pair-colorizer",
-		"pranaygp.vscode-css-peek",
-		"mikestead.dotenv",
-		"editorconfig.editorconfig",
-		"dsznajder.es7-react-js-snippets",
-		"dbaeumer.vscode-eslint",
-		"miguelsolorio.fluent-icons",
-		"mhutchie.git-graph",
-		"eamodio.gitlens",
-		"lokalise.i18n-ally",
-		"afzalsayed96.icones",
-		"antfu.iconify",
-		"kisstkondoros.vscode-gutter-preview",
-		"xabikos.javascriptsnippets",
-		"whtouche.vscode-js-console-utils",
-		"ritwickdey.liveserver",
-		"yzhang.markdown-all-in-one",
-		"pkief.material-icon-theme",
-		"zhuangtongfa.material-theme",
-		"christian-kohler.path-intellisense",
-		"esbenp.prettier-vscode",
-		"johnsoncodehk.volar",
-		"johnsoncodehk.vscode-typescript-vue-plugin",
-		"dariofuzinato.vue-peek",
-		"wscats.vue",
-		"voorjaar.windicss-intellisense"
-	]
+  "recommendations": [
+    "afzalsayed96.icones",
+    "antfu.iconify",
+    "antfu.unocss",
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
+    "formulahendry.auto-close-tag",
+    "formulahendry.auto-complete-tag",
+    "formulahendry.auto-rename-tag",
+    "lokalise.i18n-ally",
+    "mhutchie.git-graph",
+    "mikestead.dotenv",
+    "naumovs.color-highlight",
+    "pkief.material-icon-theme",
+    "sdras.vue-vscode-snippets",
+    "vue.volar",
+    "whtouche.vscode-js-console-utils",
+    "zhuangtongfa.material-theme"
+  ]
 }

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Vue Debugger",
+      "url": "http://localhost:9527",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "TS Debugger",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/tsx",
+      "skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**"],
+      "program": "${file}"
+    }
+  ]
+}

.vscode/settings.json

@@ -1,68 +1,19 @@
 {
-	"editor.quickSuggestions": {
-		"strings": true
-	},
-	"workbench.iconTheme": "material-icon-theme",
-	"workbench.colorTheme": "One Dark Pro",
-	"editor.tabSize": 2,
-	"editor.fontLigatures": true,
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
-	},
-	"git.enableSmartCommit": true,
-	"path-intellisense.mappings": {
-		"@": "${workspaceFolder}/src",
-		"~@": "${workspaceFolder}/src",
-	},
-	"gutterpreview.paths": {
-		"@": "/src",
-		"~@": "/src"
-	},
-	"terminal.integrated.cursorStyle": "line",
-	"files.associations": {
-		"*.env.*": "dotenv"
-	},
-	"[jsonc]": {
-		"editor.defaultFormatter": "vscode.json-language-features"
-	},
-	"[json]": {
-		"editor.defaultFormatter": "vscode.json-language-features"
-	},
-	"[javascript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"javascript.updateImportsOnFileMove.enabled": "always",
-	"[javascriptreact]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"terminal.integrated.fontSize": 14,
-	"terminal.integrated.fontWeight": 500,
-	"i18n-ally.displayLanguage": "zh",
-	"[html]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[typescript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[vue]": {
-		"editor.defaultFormatter": "johnsoncodehk.volar"
-	},
-	"terminal.integrated.tabs.enabled": true,
-	"[typescriptreact]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	},
-	"[markdown]": {
-		"editor.defaultFormatter": "yzhang.markdown-all-in-one"
-	},
-	"workbench.productIconTheme": "fluent-icons",
-	"vue3snippets.enable-compile-vue-file-on-did-save-code": false,
-	"editor.formatOnSave": false,
-	"material-icon-theme.activeIconPack": "angular",
-	"material-icon-theme.files.associations": {},
-	"material-icon-theme.folders.associations": {
-		"enum": "typescript",
-		"store": "context",
-		"composables": "hook",
-		"business": "core",
-	}
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "eslint.experimental.useFlatConfig": true,
+  "editor.formatOnSave": false,
+  "eslint.validate": ["html", "css", "scss", "json", "jsonc"],
+  "i18n-ally.displayLanguage": "zh-cn",
+  "i18n-ally.enabledParsers": ["ts"],
+  "i18n-ally.enabledFrameworks": ["vue"],
+  "i18n-ally.editor.preferEditor": true,
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.localesPaths": ["src/locales/langs"],
+  "prettier.enable": false,
+  "unocss.root": ["./"],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vue.server.hybridMode": true
 }

README.md

@@ -1,128 +1,165 @@
 <div align="center">
-  <a href="https://github.com/honghuangdc/soybean-admin">
-    <img alt="SoybeanAdmin Logo" width="200" height="200" src="https://s3.bmp.ovh/imgs/2021/09/088571214c76b1e5.png">
-  </a><br /><br />
+	<img src="./public/favicon.svg" width="160" />
 	<h1>Soybean Admin</h1>
-  <br />
+  <span>English | <a href="./README.zh_CN.md">中文</a></span>
 </div>
+<br />
 
-[![license](https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/license.svg)](LICENSE)
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE) ![](https://img.shields.io/github/stars/soybeanjs/soybean-admin) ![](https://img.shields.io/github/forks/soybeanjs/soybean-admin)
 
 
+>[!CAUTION]
+> the old version of `Soybean Admin` is moved to branch [legacy](https://github.com/soybeanjs/soybean-admin/tree/legacy). It is recommended to use the latest version of `Soybean Admin`.
 
-## 简介
+> [!NOTE]
+> If you think `Soybean Admin` is helpful to you, or you like our project, please give us a ⭐️ on GitHub. Your support is the driving force for us to continue to improve and add new features! Thank you for your support!
 
-Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript 的免费中后台模版，它使用了最新的前端技术栈，内置丰富的插件，有着极高的代码规范，开箱即用的中后台前端解决方案，也可用于学习参考。
+## Introduction
 
-## 特性
+[`Soybean Admin`](https://github.com/soybeanjs/soybean-admin) is a clean, elegant, beautiful and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite5, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. `Soybean Admin` provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.
 
-- **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发, 使用高效率的npm包管理器pnpm
-- **TypeScript**: 应用程序级 JavaScript 的语言
-- **主题**：丰富可配置的主题
-- **代码规范**：丰富的规范插件及极高的代码规范
-- **路由配置**：简易的路由配置
 
-## 预览
+## Features
 
-- [soybean-admin](https://soybean.pro/)
+- **Cutting-edge technology application**: using the latest popular technology stack such as Vue3, Vite5, TypeScript, Pinia and UnoCSS.
+- **Clear project architecture**: using pnpm monorepo architecture, clear structure, elegant and easy to understand.
+- **Strict code specifications**: follow the [SoybeanJS specification](https://docs.soybeanjs.cn/standard), integrate eslint, prettier and simple-git-hooks to ensure the code is standardized.
+- **TypeScript**: support strict type checking to improve code maintainability.
+- **Rich theme configuration**: built-in a variety of theme configurations, perfectly integrated with UnoCSS.
+- **Built-in internationalization solution**: easily realize multi-language support.
+- **Automated file routing system**: automatically generate route import, declaration and type. For more details, please refer to [Elegant Router](https://github.com/soybeanjs/elegant-router).
+- **Flexible permission routing**: support both front-end static routing and back-end dynamic routing.
+- **Rich page components**: built-in a variety of pages and components, including 403, 404, 500 pages, as well as layout components, tag components, theme configuration components, etc.
+- **Command line tool**: built-in efficient command line tool, git commit, delete file, release, etc.
+- **Mobile adaptation**: perfectly support mobile terminal to realize adaptive layout.
 
-<p align="center">
 
-​    <img alt="SoybeanAdmin" width="100%" src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/02.png">
+## Version
 
-​    <img alt="SoybeanAdmin" width="100%" src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/03.png">
+- **NaiveUI Version:**
+  - [Preview Link](https://naive.soybeanjs.cn/)
+  - [Github Repository](https://github.com/soybeanjs/soybean-admin)
+  - [Gitee Repository](https://gitee.com/honghuangdc/soybean-admin)
 
-​    <img alt="SoybeanAdmin" width="100%" src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/01.png">
+- **AntDesignVue Version:**
+  - [Preview Link](https://antd.soybeanjs.cn/)
+  - [Github Repository](https://github.com/soybeanjs/soybean-admin-antd)
+  - [Gitee Repository](https://gitee.com/honghuangdc/soybean-admin-antd)
 
-<img alt="SoybeanAdmin" width="100%" src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/04.png">
+- **Legacy Version:**
+  - [Preview Link](https://legacy.soybeanjs.cn/)
+  - [Github Repository](https://github.com/soybeanjs/soybean-admin/tree/legacy)
 
-<img alt="SoybeanAdmin" width="100%" src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/05.png">
 
-</p>
+## Documentation
 
-### 代码仓库
+- [Link](https://docs.soybeanjs.cn)
+- [Legacy Docs](https://legacy-docs.soybeanjs.cn)
 
-**github**：https://github.com/honghuangdc/soybean-admin
+## Example Images
 
-**gitee**：https://gitee.com/honghuangdc/soybean-admin
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-01.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-02.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-03.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-04.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-05.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-06.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-07.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-08.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-09.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-10.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-mobile.png)
 
-### 使用 Gitpod
 
-在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码.
+## Usage
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/honghuangdc/soybean-admin)
+**Environment Preparation**
 
-## 文档
+Make sure your environment meets the following requirements:
 
-[项目相关文档](./doc)
+- **git**: you need git to clone and manage project versions.
+- **NodeJS**: >=18.0.0, recommended 18.19.0 or higher.
+  > You can use [fnm](https://github.com/Schniz/fnm) to manage your NodeJS version, [installation tutorial](https://juejin.cn/post/7113462239734022158).
+- **pnpm**: >= 8.0.0, recommended 8.14.0 or higher.
 
-## 安装使用
-
-- 克隆代码
+**Clone Project**
 
 ```bash
-git clone https://github.com/honghuangdc/soybean-admin.git
+git clone https://github.com/soybeanjs/soybean-admin.git
 ```
 
-- 安装依赖
+**Install Dependencies**
 
 ```bash
 pnpm i
 ```
+> Since this project uses the pnpm monorepo management method, please do not use npm or yarn to install dependencies.
 
-- 运行
+**Start Project**
 
 ```bash
 pnpm dev
 ```
 
-- 打包
+**Build Project**
 
 ```bash
 pnpm build
 ```
 
-## 如何贡献
+## How to Contribute
 
-非常欢迎您的加入！[提一个 Issue](https://github.com/honghuangdc/soybean-admin/issues/new) 或者提交一个 Pull Request。
+We warmly welcome and appreciate all forms of contributions. If you have any ideas or suggestions, please feel free to share them by submitting [pull requests](https://github.com/soybeanjs/soybean-admin/pulls) or creating GitHub [issue](https://github.com/soybeanjs/soybean-admin/issues/new).
 
-## Git 贡献提交规范
+## Git Commit Guidelines
 
-项目已经内置angular提交规范，通过git cz 代替git commit 命令即可。
+This project has built-in `commit` command, you can execute `pnpm commit` to generate commit information that conforms to [Conventional Commits](conventionalcommits) specification. When submitting PR, please be sure to use `commit` command to create commit information to ensure the standardization of information.
 
-git cz命令需要全局安装 commitizen
+## Browser Support
 
-```bash
-pnpm i -g commitizen
-```
+It is recommended to use the latest version of Chrome in development for a better experience.
 
-## 浏览器支持
-
-本地开发推荐使用`Chrome 90+` 浏览器
-
-支持现代浏览器, 不支持 IE
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
-| :-: | :-: | :-: | :-: | :-: |
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png" alt="IE" width="24px" height="24px"  />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) |
+| --- | --- | --- | --- | --- |
 | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
-## 开源作者
 
-[@Soybean](https://github.com/honghuangdc)
+## OpenSource Author
 
-## 交流
+[Soybean](https://github.com/honghuangdc)
 
-`Soybean Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群使用问题欢迎在群内提问。
+## Contributors
 
-- QQ 群 `711301266`
+Thanks the following people for their contributions. If you want to contribute to this project, please refer to [How to Contribute](#how-to-contribute).
 
-  <div style="text-align:left;">
-    <img src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/qq_qrcode.JPG" style="width:200px" />
+<a href="https://github.com/soybeanjs/soybean-admin/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=soybeanjs/soybean-admin" />
+</a>
+
+## Communication
+
+`Soybean Admin` is a completely open source and free project, helping developers to develop medium and large-scale management systems more conveniently. It also provides WeChat and QQ communication groups. If you have any questions, please feel free to ask in the group.
+
+  <div>
+  	<p>QQ Group</p>
+    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-2.jpg" style="width:200px" />
+  </div>
+	<div>
+		<p>WeChat Group</p>
+		<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-0402.jpg" style="width:200px" />
+	</div>
+	<!-- <div>
+		<p>add the following WeChat to invite to the WeChat group</p>
+		<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybeanjs.jpg" style="width:200px" />
+	</div> -->
+  <div>
+    <p>Add Soybean's WeChat for business consultation, cooperation, project architecture, one-on-one guidance, etc.</p>
+    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybean.jpg" style="width:200px" />
   </div>
 
-  
+## Star Trend
 
-- 本人微信号：honghuangdc，欢迎来技术交流。
+[![Star History Chart](https://api.star-history.com/svg?repos=soybeanjs/soybean-admin&type=Date)](https://star-history.com/#soybeanjs/soybean-admin&Date)
 
 ## License
 
-[MIT © Soybean-2021](./LICENSE)
+This project is based on the [MIT © 2021 Soybean](./LICENSE) protocol, for learning purposes only, please retain the author's copyright information for commercial use, the author does not guarantee and is not responsible for the software.

README.zh_CN.md

@@ -0,0 +1,169 @@
+<div align="center">
+	<img src="./public/favicon.svg" width="160" />
+	<h1>Soybean Admin</h1>
+  <span><a href="./README.zh_CN.md">English</a> | 中文</span>
+</div>
+<br />
+
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE) ![](https://img.shields.io/github/stars/soybeanjs/soybean-admin) ![](https://img.shields.io/github/forks/soybeanjs/soybean-admin)
+
+>[!CAUTION]
+> 旧版本的 `Soybean Admin` 已经移动到分支 [legacy](https://github.com/soybeanjs/soybean-admin/tree/legacy)。建议使用最新版本的 `Soybean Admin`。
+
+> [!NOTE]
+> 如果您觉得 `Soybean Admin`对您有所帮助，或者您喜欢我们的项目，请在 GitHub 上给我们一个 ⭐️。您的支持是我们持续改进和增加新功能的动力！感谢您的支持！
+
+<br />
+
+[![Star History Chart](https://api.star-history.com/svg?repos=soybeanjs/soybean-admin&type=Date)](https://star-history.com/#soybeanjs/soybean-admin&Date)
+
+
+## 简介
+
+[`Soybean Admin`](https://github.com/soybeanjs/soybean-admin) 是一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。`Soybean Admin` 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。
+
+## 特性
+
+- **前沿技术应用**：采用 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS 等最新流行的技术栈。
+- **清晰的项目架构**：采用 pnpm monorepo 架构，结构清晰，优雅易懂。
+- **严格的代码规范**：遵循 [SoybeanJS 规范](https://docs.soybeanjs.cn/zh/standard)，集成了eslint, prettier 和 simple-git-hooks，保证代码的规范性。
+- **TypeScript**： 支持严格的类型检查，提高代码的可维护性。
+- **丰富的主题配置**：内置多样的主题配置，与 UnoCSS 完美结合。
+- **内置国际化方案**：轻松实现多语言支持。
+- **自动化文件路由系统**：自动生成路由导入、声明和类型。更多细节请查看 [Elegant Router](https://github.com/soybeanjs/elegant-router)。
+- **灵活的权限路由**：同时支持前端静态路由和后端动态路由。
+- **丰富的页面组件**：内置多样页面和组件，包括403、404、500页面，以及布局组件、标签组件、主题配置组件等。
+- **命令行工具**：内置高效的命令行工具，git提交、删除文件、发布等。
+- **移动端适配**：完美支持移动端，实现自适应布局。
+
+
+## 版本
+
+- **NaiveUI 版本:**
+  - [预览地址](https://naive.soybeanjs.cn/)
+  - [Github 仓库](https://github.com/soybeanjs/soybean-admin)
+  - [Gitee 仓库](https://gitee.com/honghuangdc/soybean-admin)
+
+- **AntDesignVue 版本:**
+  - [预览地址](https://antd.soybeanjs.cn/)
+  - [Github 仓库](https://github.com/soybeanjs/soybean-admin-antd)
+  - [Gitee 仓库](https://gitee.com/honghuangdc/soybean-admin-antd)
+  -
+- **旧版:**
+  - [预览地址](https://legacy.soybeanjs.cn/)
+  - [Github 仓库](https://github.com/soybeanjs/soybean-admin/tree/legacy)
+
+
+## 文档
+
+- [地址](https://docs.soybeanjs.cn)
+- [旧版文档](https://legacy-docs.soybeanjs.cn)
+
+## 示例图片
+
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-01.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-02.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-03.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-04.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-05.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-06.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-07.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-08.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-09.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-10.png)
+![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-mobile.png)
+
+
+## 使用
+
+**环境准备**
+
+确保你的环境满足以下要求：
+
+- **git**: 你需要git来克隆和管理项目版本。
+- **NodeJS**: >=18.0.0，推荐 18.19.0 或更高。
+  > 你可以使用 [fnm](https://github.com/Schniz/fnm) 来管理你的NodeJS版本，[安装教程](https://juejin.cn/post/7113462239734022158)。
+- **pnpm**: >= 8.0.0，推荐 8.14.0 或更高。
+
+**克隆项目**
+
+```bash
+git clone https://github.com/soybeanjs/soybean-admin.git
+```
+
+**安装依赖**
+
+```bash
+pnpm i
+```
+> 由于本项目采用了 pnpm monorepo 的管理方式，因此请不要使用 npm 或 yarn 来安装依赖。
+
+**启动项目**
+
+```bash
+pnpm dev
+```
+
+**构建项目**
+
+```bash
+pnpm build
+```
+
+## 如何贡献
+
+我们热烈欢迎并感谢所有形式的贡献。如果您有任何想法或建议，欢迎通过提交 [pull requests](https://github.com/soybeanjs/soybean-admin/pulls) 或创建 GitHub [issue](https://github.com/soybeanjs/soybean-admin/issues/new) 来分享。
+
+## Git 提交规范
+
+本项目已内置 `commit` 命令，您可以通过执行 `pnpm commit` 来生成符合 [Conventional Commits](conventionalcommits) 规范的提交信息。在提交PR时，请务必使用 `commit` 命令来创建提交信息，以确保信息的规范性。
+
+
+## 浏览器支持
+
+推荐使用最新版的 Chrome 浏览器进行开发，以获得更好的体验。
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png" alt="IE" width="24px" height="24px"  />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/) |
+| --- | --- | --- | --- | --- |
+| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## 开源作者
+
+[Soybean](https://github.com/honghuangdc)
+
+## 贡献者
+
+感谢以下贡献者的贡献。如果您想为本项目做出贡献，请参考 [如何贡献](#如何贡献)。
+
+<a href="https://github.com/soybeanjs/soybean-admin/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=soybeanjs/soybean-admin" />
+</a>
+
+## 交流
+
+`Soybean Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供微信和 QQ 交流群，使用问题欢迎在群内提问。
+
+  <div>
+  	<p>QQ交流群</p>
+    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-2.jpg" style="width:200px" />
+  </div>
+	<div>
+		<p>微信群</p>
+		<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-0402.jpg" style="width:200px" />
+	</div>
+	<!-- <div>
+		<p>添加下面微信邀请进微信群</p>
+		<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybeanjs.jpg" style="width:200px" />
+	</div> -->
+  <div>
+    <p>添加 Soybean 的微信，业务咨询、合作、项目架构、一对一指导等</p>
+    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybean.jpg" style="width:200px" />
+  </div>
+
+## Star 趋势
+
+[![Star History Chart](https://api.star-history.com/svg?repos=soybeanjs/soybean-admin&type=Date)](https://star-history.com/#soybeanjs/soybean-admin&Date)
+
+## 开源协议
+
+项目基于 [MIT © 2021 Soybean](./LICENSE) 协议，仅供学习参考，商业使用请保留作者版权信息，作者不保证也不承担任何软件的使用风险。

build/config/index.ts

@@ -0,0 +1 @@
+export * from './proxy';

build/config/proxy.ts

@@ -0,0 +1,36 @@
+import type { ProxyOptions } from 'vite';
+import { createServiceConfig } from '../../src/utils/service';
+
+/**
+ * Set http proxy
+ *
+ * @param env - The current env
+ * @param isDev - Is development environment
+ */
+export function createViteProxy(env: Env.ImportMeta, isDev: boolean) {
+  const isEnableHttpProxy = isDev && env.VITE_HTTP_PROXY === 'Y';
+
+  if (!isEnableHttpProxy) return undefined;
+
+  const { baseURL, proxyPattern, other } = createServiceConfig(env);
+
+  const proxy: Record<string, ProxyOptions> = createProxyItem({ baseURL, proxyPattern });
+
+  other.forEach(item => {
+    Object.assign(proxy, createProxyItem(item));
+  });
+
+  return proxy;
+}
+
+function createProxyItem(item: App.Service.ServiceConfigItem) {
+  const proxy: Record<string, ProxyOptions> = {};
+
+  proxy[item.proxyPattern] = {
+    target: item.baseURL,
+    changeOrigin: true,
+    rewrite: path => path.replace(new RegExp(`^${item.proxyPattern}`), '')
+  };
+
+  return proxy;
+}

build/define/index.ts

@@ -1,8 +0,0 @@
-import dayjs from 'dayjs';
-
-/** 项目构建时间 */
-const PROJECT_BUILD_TIME = JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss'));
-
-export default {
-  PROJECT_BUILD_TIME
-};

build/env/index.ts

@@ -1,5 +0,0 @@
-import dotenv from 'dotenv';
-
-const { parsed: viteEnv } = dotenv.config(); // 加载环境
-
-export default viteEnv;

build/index.ts

@@ -1,5 +0,0 @@
-import viteEnv from './env';
-import plugins from './plugins';
-import define from './define';
-
-export { viteEnv, plugins, define };

build/plugins/html.ts

@@ -1,12 +0,0 @@
-import { minifyHtml, injectHtml } from 'vite-plugin-html'; // html插件(使用变量、压缩)
-import viteEnv from '../env';
-
-export default [
-  minifyHtml(),
-  injectHtml({
-    injectData: {
-      title: viteEnv.VITE_APP_TITLE,
-      appName: viteEnv.VITE_APP_TITLE_LABEL
-    }
-  })
-];

build/plugins/iconify.ts

@@ -1,10 +0,0 @@
-import Icons from 'unplugin-icons/vite'; // iconify图标
-import IconsResolver from 'unplugin-icons/resolver';
-import Components from 'unplugin-vue-components/vite'; // 从指定目录自动导入组件
-
-export default [
-  Components({
-    resolvers: [IconsResolver({ componentPrefix: 'icon' })]
-  }),
-  Icons()
-];

build/plugins/index.ts

@@ -1,9 +1,26 @@
-import vue from './vue';
-import html from './html';
-import iconify from './iconify';
-import windicss from './windicss';
-import visualizer from './visualizer';
+import type { PluginOption } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import VueDevtools from 'vite-plugin-vue-devtools';
+import progress from 'vite-plugin-progress';
+import { setupElegantRouter } from './router';
+import { setupUnocss } from './unocss';
+import { setupUnplugin } from './unplugin';
 
-const plugins = [vue, ...html, ...iconify, windicss, visualizer];
+export function setupVitePlugins(viteEnv: Env.ImportMeta) {
+  const plugins: PluginOption = [
+    vue({
+      script: {
+        defineModel: true
+      }
+    }),
+    vueJsx(),
+    VueDevtools(),
+    setupElegantRouter(),
+    setupUnocss(viteEnv),
+    ...setupUnplugin(viteEnv),
+    progress()
+  ];
 
-export default plugins;
+  return plugins;
+}

build/plugins/router.ts

@@ -0,0 +1,44 @@
+import type { RouteMeta } from 'vue-router';
+import ElegantVueRouter from '@elegant-router/vue/vite';
+import type { RouteKey } from '@elegant-router/types';
+
+export function setupElegantRouter() {
+  return ElegantVueRouter({
+    layouts: {
+      base: 'src/layouts/base-layout/index.vue',
+      blank: 'src/layouts/blank-layout/index.vue'
+    },
+    customRoutes: {
+      names: ['exception_403', 'exception_404', 'exception_500']
+    },
+    routePathTransformer(routeName, routePath) {
+      const key = routeName as RouteKey;
+
+      if (key === 'login') {
+        const modules: UnionKey.LoginModule[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat'];
+
+        const moduleReg = modules.join('|');
+
+        return `/login/:module(${moduleReg})?`;
+      }
+
+      return routePath;
+    },
+    onRouteMetaGen(routeName) {
+      const key = routeName as RouteKey;
+
+      const constantRoutes: RouteKey[] = ['login', '403', '404', '500'];
+
+      const meta: Partial<RouteMeta> = {
+        title: key,
+        i18nKey: `route.${key}` as App.I18n.I18nKey
+      };
+
+      if (constantRoutes.includes(key)) {
+        meta.constant = true;
+      }
+
+      return meta;
+    }
+  });
+}

build/plugins/unocss.ts

@@ -0,0 +1,32 @@
+import process from 'node:process';
+import path from 'node:path';
+import unocss from '@unocss/vite';
+import presetIcons from '@unocss/preset-icons';
+import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders';
+
+export function setupUnocss(viteEnv: Env.ImportMeta) {
+  const { VITE_ICON_PREFIX, VITE_ICON_LOCAL_PREFIX } = viteEnv;
+
+  const localIconPath = path.join(process.cwd(), 'src/assets/svg-icon');
+
+  /** The name of the local icon collection */
+  const collectionName = VITE_ICON_LOCAL_PREFIX.replace(`${VITE_ICON_PREFIX}-`, '');
+
+  return unocss({
+    presets: [
+      presetIcons({
+        prefix: `${VITE_ICON_PREFIX}-`,
+        scale: 1,
+        extraProperties: {
+          display: 'inline-block'
+        },
+        collections: {
+          [collectionName]: FileSystemIconLoader(localIconPath, svg =>
+            svg.replace(/^<svg\s/, '<svg width="1em" height="1em" ')
+          )
+        },
+        warn: true
+      })
+    ]
+  });
+}

build/plugins/unplugin.ts

@@ -0,0 +1,50 @@
+import process from 'node:process';
+import path from 'node:path';
+import type { PluginOption } from 'vite';
+import Icons from 'unplugin-icons/vite';
+import IconsResolver from 'unplugin-icons/resolver';
+import Components from 'unplugin-vue-components/vite';
+import { AntDesignVueResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
+
+export function setupUnplugin(viteEnv: Env.ImportMeta) {
+  const { VITE_ICON_PREFIX, VITE_ICON_LOCAL_PREFIX } = viteEnv;
+
+  const localIconPath = path.join(process.cwd(), 'src/assets/svg-icon');
+
+  /** The name of the local icon collection */
+  const collectionName = VITE_ICON_LOCAL_PREFIX.replace(`${VITE_ICON_PREFIX}-`, '');
+
+  const plugins: PluginOption[] = [
+    Icons({
+      compiler: 'vue3',
+      customCollections: {
+        [collectionName]: FileSystemIconLoader(localIconPath, svg =>
+          svg.replace(/^<svg\s/, '<svg width="1em" height="1em" ')
+        )
+      },
+      scale: 1,
+      defaultClass: 'inline-block'
+    }),
+    Components({
+      dts: 'src/typings/components.d.ts',
+      types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
+      resolvers: [
+        AntDesignVueResolver({
+          importStyle: false
+        }),
+        NaiveUiResolver(),
+        IconsResolver({ customCollections: [collectionName], componentPrefix: VITE_ICON_PREFIX })
+      ]
+    }),
+    createSvgIconsPlugin({
+      iconDirs: [localIconPath],
+      symbolId: `${VITE_ICON_LOCAL_PREFIX}-[dir]-[name]`,
+      inject: 'body-last',
+      customDomId: '__SVG_ICON_LOCAL__'
+    })
+  ];
+
+  return plugins;
+}

build/plugins/visualizer.ts

@@ -1,7 +0,0 @@
-import { visualizer } from 'rollup-plugin-visualizer';
-
-export default visualizer({
-  open: true,
-  gzipSize: true,
-  brotliSize: true
-});

build/plugins/vue.ts

@@ -1,3 +0,0 @@
-import vue from '@vitejs/plugin-vue';
-
-export default vue({});

build/plugins/windicss.ts

@@ -1,3 +0,0 @@
-import windiCSS from 'vite-plugin-windicss';
-
-export default windiCSS();

commitlint.config.js

@@ -1 +0,0 @@
-module.exports = { extends: ['@commitlint/config-conventional'] };

doc/TS写法规范.md

@@ -1,47 +0,0 @@
-### 1.interface和type
-
-##### interface和type使用优先级：能用interface表示的类型就用interface。
-
-### 2.请求函数
-
-#### api接口：
-
-统一以 **fetch** 开头，例如：
-
-```typescript
-/**
- * 获取用户信息
- * @param id - 用户唯一标识id
- */
-function fetchUserInfo(id：string) {
-	// ***
-}
-/**
- * 删除列表项
- * @param id - 列表id
- */
-function fetchDeleteListItem(id：string) {
-	// ***
-}
-```
-
-#### middleware中间件：
-
-统一以 **handle** 开头，例如
-
-```typescript
-/**接口返回的用户信息 */
-interface ResponseUserInfo {
-  userId: string;
-  userName: string;
-  userAge: number;
-}
-/**
- * 获取用户信息 中间件
- @param data - 返回的用户信息
- */
-function handleUserInfo(data: ResponseUserInfo): UserInfo {
-  // ***
-}
-```
-

doc/css书写规范.md

@@ -1,35 +0,0 @@
-### css书写顺序
-
-1. 定位属性：
-
-   `position display float left top right bottom overflow clear z-index`
-
-2. 自身属性：
-
-   `width height padding border margin background`
-
-3. 文字样式：
-
-   `font-family font-size font-style font-weight font-varient color`
-
-4. 文本属性：
-
-   `text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow`
-
-5. css3中新增属性：
-
-   `content box-shadow border-radius transform`
-
-#### class类名的顺序：
-
-1. 自定义的class类名(遵循BEM命名法)
-2. css插件提供的类名按照以上的css属性对应的顺序
-
-例如：自定义类名结合tailwind css
-
-<div class="demo-container absolute flex justify-center items-center left-10px top-12px overflow-hidden wh-full p-10px border-1px border-[#f00] m-24px bg-[#fff] text-32px text-[#0f0]"></div>
-<style>
-	.demo-container {
-		box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-	}
-</style>

doc/iconify使用文档.md

@@ -1,41 +0,0 @@
-### iconify用法
-
-#### 一、静态用法：直接用图标的组件名称
-
-1. 安装vscode智能提示的插件: Iconify IntelliSense
-2. 找图标：网址 https://icones.js.org/ 或者 vscode安装 icones插件
-3. 确定图标名字：找到图标后复制名字 如：**'mdi:emoticon'** 组件为: `<icon-mdi:emoticon />`, icon-为设置的前缀
-4. 设置样式：同html标签一样直接应用style属性或者class属性; 通过设置color和font-size属性设置对应的颜色和大小
-
-#### 二、多个图标动态渲染
-
-1. 确定图标名字，如：'mdi:emoticon'
-
-2. 引入Icon组件：
-
-   `import { Icon } from '@iconify/vue';`
-
-3. 动态渲染
-
-    `<Icon icon="mdi:emoticon" />`
-
-*ps：Icon组件属性 https://docs.iconify.design/icon-components/vue/*
-
-#### 三、结合naiveUI组件动态渲染
-
-1. 确定图标名字，如：**'mdi:emoticon'**
-
-2. 引入vue的h函数：
-
-   `import { h } from 'vue';`
-
-3. 引入Icon组件
-
-   `import { Icon } from '@iconify/vue';`
-
-4. 动态渲染
-
-   `() => h(Icon, { icon: 'mdi:emoticon', style: { color: '#f00', fontSize: '16px' } })`
-
-*ps：@/uitls已封装好了函数：iconifyRender*
-

doc/vue书写规范.md

@@ -1,209 +0,0 @@
-### script-setup写法
-
-#### 第一部分
-
-##### template
-
-#### 第二部分
-
-##### script
-
-##### 一、import的顺序, 依次按照下面的顺序。
-
-1. vue模块
-
-   ```typescript
-   import {  } from 'vue';
-   ```
-
-2. vue相关类型
-
-   ```typescript
-   import type {  } from 'vue';
-   ```
-
-3. vue-router模块
-
-   ```typescript
-   import {  } from 'vue-router';
-   ```
-
-4. vue-router相关类型
-
-   ```typescript
-   import type {  } from 'vue-router';
-   ```
-
-5. UI框架模块
-
-   ```typescript
-   import {  } from 'naive-ui';
-   ```
-
-6. UI框架相关类型
-
-   ```typescript
-   import type {  } from 'naive-ui';
-   ```
-
-7. 第三方依赖
-
-   ```typescript
-   import BScroll from 'bscroll';
-   ```
-
-8. 第三方依赖相关类型
-
-   ```typescript
-   import type {  } from 'bscroll';
-   ```
-
-9. @/enum
-
-   ```typescript
-   import {  } from '@/enum';
-   ```
-
-10. @/setting
-
-    ```typescript
-    import {  } from '@/setting';
-    ```
-
-11. @/plugins
-
-    ```typescript
-    import {  } from '@/plugins';
-    ```
-
-12. @/layouts
-
-    ```typescript
-    import {  } from '@/layouts';
-    ```
-
-13. @/views
-
-    ```typescript
-    import {  } from '@/views';
-    ```
-
-14. @/components
-
-    ```typescript
-    import {  } from '@/components';
-    ```
-
-15. @/hooks
-
-    ```typescript
-    import {  } from '@/hooks';
-    ```
-
-16. @/store
-
-    ```typescript
-    import {  } from '@/store';
-    ```
-
-17. @/context
-
-    ```typescript
-    import {  } from '@/context';
-    ```
-
-18. @/router
-
-    ```typescript
-    import {  } from '@/router';
-    ```
-
-19. @/service
-
-    ```typescript
-    import {  } from '@/service';
-    ```
-
-20. @/utils
-
-    ```typescript
-    import {  } from '@/utils';
-    ```
-
-21. @/interface
-
-    ```typescript
-    import {  } from '@/interface';
-    ```
-
-22. @/assets
-
-    ```typescript
-    import {  } from '@/assets';
-    ```
-
-23. 相对路径依赖
-
-    ```typescript
-    import {  } from './components';
-    ```
-
-##### 二、TS类型声明
-
-```typescript
-interface Props {
-	/**姓名 */
-  name: string;
-	/**年龄 */
-  age?: number;
-}
-interface Emits {
-  /**
-   * 删除事件
-   * @param id - 删除项的id
-   */
-	(e: 'delete', id: number): void;
-}
-```
- 
-
-##### 三、defineProps、defineEmits、withDefaults
-
-1. 定义属性，如：
-
-```typescript
-const props = withDefaults(defineProps<Props>(), {
-  age: 24
-});
-```
-
-其中name是必须的属性，age是可选属性，通过withDefaults添加默认值
-
-2. 定义emit事件
-
-```typescript
-const emit = defineEmits<Emits>();
-```
-
-##### 四、响应式use函数
-
-有些use函数需要传入响应式的变量参数时，则书写在声明的变量下面。
-
-```typescript
-const router = useRouter();
-const route = useRoute();
-```
-
-```typescript
-/**dom引用 */
-const domRef = ref<HTMLElement | null>(null);
-const { height: domRefHeight } = useElementSize(domRef); //获取domRef的响应式高度
-```
-
-
-
-##### 五、变量、函数声明
-
-##### 六、vue生命周期函数、nextTick执行
-
-##### 七、defineExpose

doc/命名规范.md

@@ -1,72 +0,0 @@
-### 命名法：
-
-#### 1.驼峰命名法(小驼峰)
-
-**getUser**
-
-#### 2.帕斯卡命名法(大驼峰)
-
- **GlobalHeader**
-
-#### 3.短横线命名法
-
-**user-center**
-
-#### 4.下划线命名法
-
- **MAX_LENGTH**
-
-### 文件、文件夹命名：
-
-1. 文件夹作为**路由页面**时用小写字母，包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔, 即**短横线命名法**，此时vue文件为**index.vue**。
-2. 文件夹作为**vue组件**时用**大写驼峰命名法**。
-3. 文件作为**vue组件**时用**大写驼峰命名法**。
-4. 文件作为**use函数**时用**小驼峰命名法**。
-5. 其余文件用**短横线命名法**。
-
-### 变量命名：
-#### 命名方式 : 小驼峰式命名方法
-**命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词**
-
-动词 | 含义 | 返回值
----|---|---
-can | 判断是否可执行某个动作 | 函数返回一个布尔值。true：可执行；false：不可执行。
-has | 判断是否含有某个值 | 函数返回一个布尔值。true：含有此值；false：不含有此值。
-is | 判断是否为某个值 | 函数返回一个布尔值。true：为某个值；false：不为某个值。
-get | 获取某个值 | 函数返回一个非布尔值。
-set | 设置某个值 | 无返回值、返回是否设置成功或者返回链式对象。
-
-```javascript
-/** 是否可读 */
-function canRead(){
-	return true;
-}
-
-/** 获取姓名 */
-function getName(){
-  return this.name;
-}
-```
-
-
-### 常量
-#### 命名方法 : 使用大写字母和下划线来组合命名，下划线用以分割单词。
-```javascript
-const MAX_COUNT = 10;
-const URL = 'http://www.baidu.com';
-```
-
-### TS类型接口interface和type
-
-##### 命名方法：大写驼峰
-
-```typescript
-interface PersonInfo {
-  /**姓名 */
-  name: string;
-  /**性别 '0':男; '1': 女; '2': 未知 */
-  gender: '0' | '1' | '2';
-  /**年龄 */
-  age: 25;
-}
-```

doc/目录.md

@@ -1,101 +0,0 @@
-
-## 目录规范
-
-```javascript
-qitan-pc
-├── build                      //vite构建相关配置和插件
-│   ├── define                 //定义的全局常量，通过vite构建时注入
-│   ├── env                    //.env环境文件内容加载插件
-│   └── plugins                //构建插件
-│       ├── html.ts            //html插件(注入变量，压缩代码等)
-│       ├── iconify.ts         //iconify图标插件
-│       ├── visualizer.ts      //构建的依赖大小占比分析插件
-│       ├── vue.ts             //vue相关vite插件
-│       └── windicss.ts        //css框架插件
-├── doc                        //项目相关说明文档
-├── public                     //公共目录
-│   ├── resource               //资源文件夹(不会被打包)
-│   └── favicon.ico            //网站标签图标
-├── src
-│   ├── assets                 //静态资源
-│   ├── components             //全局组件
-│   │   ├── business           //业务相关组件
-│   │   ├── common             //公共组件
-│   │   └── custom             //自定义组件
-│   ├── context                //全局上下文(通过provide和inject实现)
-│   │   ├── app                //从app.vue注入的上下文
-│   │   └── part               //局部组件注入的上下文
-│   ├── enum                   //TS枚举
-│   │   ├── animate.ts         //动画枚举
-│   │   ├── business.ts        //业务相关枚举
-│   │   ├── common.ts          //通用枚举
-│   │   ├── route.ts           //路由相关枚举
-│   │   ├── storage.ts         //存储相关枚举
-│   │   └── theme.ts           //系统主题配置相关枚举
-│   ├── hooks                  //组合式的钩子函数hooks
-│   │   ├── business           //业务相关hooks
-│   │   └── common             //通用hooks
-│   ├── interface              //TS类型接口
-│   │   ├── business.ts        //业务相关类型接口
-│   │   ├── common.ts          //通用类型接口
-│   │   └── theme.ts           //系统主题配置相关类型接口
-│   ├── layouts                //布局组件
-│   │   ├── BasicLayout        //基本布局(包含全局头部、侧边栏、底部等公共部分)
-│   │   ├── BlankLayout        //空白布局组件(单个页面)
-│   │   └── RouterViewLayout   //路由组件(用于多级路由之间的桥接)
-│   ├── plugins                //插件
-│   │   └── dark-mode.ts       //windicss暗黑模式插件
-│   ├── router                 //vue路由
-│   │   ├── modules            //路由页面(按模块划分)
-│   │   ├── permission         //路由权限(路由守卫)
-│   │   ├── routes         		 //声明的路由
-│   │   └── setup              //路由挂载函数
-│   ├── service                //网络请求
-│   │   ├── api                //接口api
-│   │   ├── middleware         //请求结果的处理中间件
-│   │   └── request            //封装的请求函数
-│   ├── settings               //项目初始配置
-│   │   └── theme.ts           //项目主题初始配置
-│   ├── store                  //状态管理
-│   │   └── modules            //状态管理划分的模块
-│   ├── styles                 //样式
-│   │   ├── css                //css
-│   │   └── scss               //scss
-│   ├── typings                //TS类型声明文件(*.d.ts)
-│   ├── utils                  //全局工具函数
-│   │   ├── auth               //用户鉴权
-│   │   ├── common             //通用工具函数
-│   │   ├── package            //npm依赖
-│   │   ├── router             //路由
-│   │   ├── request            //请求工具函数
-│   │   └── storage            //存储
-│   ├── views                  //页面
-│   │   ├── about
-│   │   ├── component
-│   │   ├── dashboard
-│   │   ├── document
-│   │   ├── multi-menu
-│   │   └── system             //系统内置页面：登录、异常页等
-│   ├── App.vue                //vue文件入口
-│   ├── AppProvider.vue        //配置naive UI的vue文件(国际化,loadingBar、message等组件)
-│   └── main.ts                //项目入口ts文件
-├── .cz-config.js              //git cz提交配置
-├── .editorconfig              //统一编辑器配置
-├── .env                       //环境文件
-├── .env.development           //环境文件(开发模式)
-├── .env.production            //环境文件(生产模式)
-├── .env.staging               //环境文件(自定义staging模式)
-├── .eslintignore              //忽略eslint检查的配置文件
-├── .eslintrc.js               //eslint配置文件
-├── .gitignore                 //忽略git提交的配置文件
-├── .husky                     //git commit提交钩子，提交前检查代码格式和提交commit内容的格式
-├── .prettierrc.js             //prettier代码格式插件配置
-├── commitlint.config.js       //commitlint提交规范插件配置
-├── index.html
-├── package.json               //npm依赖描述文件
-├── pnpm-lock.yaml             //npm包管理器pnpm依赖锁定文件
-├── README.md                  //项目介绍文档
-├── tsconfig.json              //TS配置
-├── vite.config.ts             //vite配置
-└── windi.config.ts            //windicss框架配置
-```

eslint.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from '@soybeanjs/eslint-config';
+
+export default defineConfig(
+  { vue: true, unocss: true },
+  {
+    rules: {
+      'vue/multi-word-component-names': [
+        'warn',
+        {
+          ignores: ['index', 'App', '[id]']
+        }
+      ],
+      'vue/component-name-in-template-casing': [
+        'warn',
+        'PascalCase',
+        {
+          registeredComponentsOnly: false,
+          ignores: ['/^icon-/']
+        }
+      ]
+    }
+  }
+);

index.html

@@ -1,32 +1,13 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="zh-cmn-Hans">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><%= title %></title>
+    <title>%VITE_APP_TITLE%</title>
   </head>
   <body>
-		<div id="appProvider" style="display: none"></div>
-    <div id="app">
-			<!-- 页面渲染之前加载动画 -->
-      <div class="app-loading">
-        <img class="app-loading_logo" src="/resource/logo.png" />
-        <div class="app-loading__dot-wrapper">
-          <div class="app-loading__dot">
-            <i class="left top"></i>
-            <i class="left bottom delay-400"></i>
-            <i class="right top delay-800"></i>
-            <i class="right bottom delay-1200"></i>
-          </div>
-        </div>
-        <h2 class="app-loading_title"><%= appName %></h2>
-        <style>
-          @import '/resource/loading.css';
-        </style>
-      </div>
-      <!-- End -->
-		</div>
+    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -1,102 +1,107 @@
 {
   "name": "soybean-admin",
-  "version": "0.0.2",
+  "type": "module",
+  "version": "1.0.0-beta.2",
+  "packageManager": "pnpm@8.15.5",
+  "description": "A fresh and elegant admin template, based on Vue3、Vite3、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite3、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
   "author": {
     "name": "Soybean",
-    "email": "honghuangdc@gmail.com",
-    "url": "https://github.com/honghuangdc"
+    "email": "soybeanjs@outlook.com",
+    "url": "https://github.com/soybeanjs"
   },
-  "scripts": {
-    "release": "standard-version",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
-    "dev": "vite",
-    "dev:prod": "vite --mode production",
-    "dev:staging": "vite --mode staging",
-    "build": "vue-tsc --noEmit --skipLibCheck && vite build",
-    "build:dev": "vue-tsc --noEmit --skipLibCheck && vite build --mode development",
-    "build:staging": "vue-tsc --noEmit --skipLibCheck && vite build --mode staging",
-    "serve": "vite preview",
-    "lint": "eslint ./src --ext .vue,.js,jsx,.ts,tsx",
-    "lint:fix": "eslint --fix ./src --ext .vue,.js,jsx,.ts,tsx",
-    "prepare": "husky install",
-    "postinstall": "patch-package"
-  },
-  "lint-staged": {
-    "*.{vue,js,jsx,ts,tsx}": "eslint --fix"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-customizable"
-    }
-  },
-  "dependencies": {
-    "@antv/g2plot": "^2.3.40",
-    "@better-scroll/core": "^2.4.2",
-    "@vueuse/core": "^6.9.2",
-    "axios": "^0.24.0",
-    "chroma-js": "^2.1.2",
-    "clipboard": "^2.0.8",
-    "dayjs": "^1.10.7",
-    "form-data": "^4.0.0",
-    "naive-ui": "^2.20.3",
-    "pinia": "^2.0.4",
-    "print-js": "^1.6.0",
-    "qs": "^6.10.1",
-    "swiper": "^7.3.0",
-    "vditor": "^3.8.7",
-    "vue": "^3.2.22",
-    "vue-router": "^4.0.12",
-    "wangeditor": "^4.7.9",
-    "xgplayer": "^2.31.2"
-  },
-  "devDependencies": {
-    "@amap/amap-jsapi-types": "^0.0.8",
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0",
-    "@iconify/json": "^1.1.431",
-    "@iconify/vue": "^3.1.1",
-    "@types/bmapgl": "^0.0.4",
-    "@types/chroma-js": "^2.1.3",
-    "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "@vitejs/plugin-vue": "^1.9.4",
-    "@vue/compiler-sfc": "^3.2.22",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "commitizen": "^4.2.4",
-    "cz-conventional-changelog": "^3.3.0",
-    "cz-customizable": "^6.3.0",
-    "dotenv": "^10.0.0",
-    "eslint": "^8.2.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.1.1",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.0.3",
-    "patch-package": "^6.4.7",
-    "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.4.1",
-    "rollup-plugin-visualizer": "^5.5.2",
-    "sass": "^1.43.4",
-    "typescript": "^4.5.2",
-    "unplugin-icons": "^0.12.18",
-    "unplugin-vue-components": "^0.17.2",
-    "vite": "~2.5.10",
-    "vite-plugin-html": "^2.1.1",
-    "vite-plugin-windicss": "^1.5.1",
-    "vue-tsc": "~0.28.10",
-    "vueuc": "^0.4.15",
-    "windicss": "^3.2.1"
-  },
-  "homepage": "https://github.com/honghuangdc/soybean-admin",
+  "license": "MIT",
+  "homepage": "https://github.com/soybeanjs/soybean-admin",
   "repository": {
-    "type": "git",
-    "url": "git+https://github.com/honghuangdc/soybean-admin.git"
+    "url": "https://github.com/soybeanjs/soybean-admin.git"
   },
   "bugs": {
-    "url": "https://github.com/honghuangdc/soybean-admin/issues"
-  }
+    "url": "https://github.com/soybeanjs/soybean-admin/issues"
+  },
+  "keywords": [
+    "Vue3 admin ",
+    "vue-admin-template",
+    "Vite5",
+    "TypeScript",
+    "naive-ui",
+    "naive-ui-admin",
+    "ant-design-vue v4",
+    "UnoCSS"
+  ],
+  "scripts": {
+    "build": "vite build --mode prod",
+    "build:test": "vite build --mode test",
+    "cleanup": "sa cleanup",
+    "commit": "sa git-commit",
+    "dev": "vite --mode test",
+    "dev:prod": "vite --mode prod",
+    "gen-route": "sa gen-route",
+    "lint": "eslint . --fix",
+    "prepare": "simple-git-hooks",
+    "preview": "vite preview",
+    "release": "sa release",
+    "typecheck": "vue-tsc --noEmit --skipLibCheck",
+    "update-pkg": "sa update-pkg"
+  },
+  "dependencies": {
+    "@better-scroll/core": "2.5.1",
+    "@iconify/vue": "4.1.1",
+    "@sa/axios": "workspace:*",
+    "@sa/color-palette": "workspace:*",
+    "@sa/hooks": "workspace:*",
+    "@sa/materials": "workspace:*",
+    "@sa/utils": "workspace:*",
+    "@vueuse/core": "10.9.0",
+    "clipboard": "2.0.11",
+    "dayjs": "1.11.10",
+    "echarts": "5.5.0",
+    "lodash-es": "4.17.21",
+    "naive-ui": "2.38.1",
+    "nprogress": "0.2.0",
+    "pinia": "2.1.7",
+    "vue": "3.4.21",
+    "vue-draggable-plus": "0.4.0",
+    "vue-i18n": "9.10.2",
+    "vue-router": "4.3.0"
+  },
+  "devDependencies": {
+    "@elegant-router/vue": "0.3.6",
+    "@iconify/json": "2.2.196",
+    "@sa/scripts": "workspace:*",
+    "@sa/uno-preset": "workspace:*",
+    "@soybeanjs/eslint-config": "1.2.5",
+    "@types/lodash-es": "4.17.12",
+    "@types/node": "20.11.30",
+    "@types/nprogress": "0.2.3",
+    "@unocss/eslint-config": "0.58.7",
+    "@unocss/preset-icons": "0.58.7",
+    "@unocss/preset-uno": "0.58.7",
+    "@unocss/transformer-directives": "0.58.7",
+    "@unocss/transformer-variant-group": "0.58.7",
+    "@unocss/vite": "0.58.7",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vitejs/plugin-vue-jsx": "3.1.0",
+    "eslint": "8.57.0",
+    "eslint-plugin-vue": "9.24.0",
+    "lint-staged": "15.2.2",
+    "sass": "1.72.0",
+    "simple-git-hooks": "2.11.1",
+    "tsx": "4.7.1",
+    "typescript": "5.4.3",
+    "unplugin-icons": "0.18.5",
+    "unplugin-vue-components": "0.26.0",
+    "vite": "5.2.6",
+    "vite-plugin-progress": "0.0.7",
+    "vite-plugin-svg-icons": "2.0.1",
+    "vite-plugin-vue-devtools": "7.0.24",
+    "vue-eslint-parser": "9.4.2",
+    "vue-tsc": "2.0.7"
+  },
+  "simple-git-hooks": {
+    "commit-msg": "pnpm sa git-commit-verify",
+    "pre-commit": "pnpm typecheck && pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  },
+  "website": "https://admin.soybeanjs.cn"
 }

packages/axios/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@sa/axios",
+  "version": "1.0.0-beta.2",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["./src/*"]
+    }
+  },
+  "dependencies": {
+    "@sa/utils": "workspace:*",
+    "axios": "1.6.8",
+    "axios-retry": "4.1.0",
+    "qs": "6.12.0"
+  },
+  "devDependencies": {
+    "@types/qs": "6.9.14"
+  }
+}

packages/axios/src/constant.ts

@@ -0,0 +1,5 @@
+/** request id key */
+export const REQUEST_ID_KEY = 'X-Request-Id';
+
+/** the backend error code key */
+export const BACKEND_ERROR_CODE = 'BACKEND_ERROR';

packages/axios/src/index.ts

@@ -0,0 +1,177 @@
+import axios, { AxiosError } from 'axios';
+import type { AxiosResponse, CancelTokenSource, CreateAxiosDefaults, InternalAxiosRequestConfig } from 'axios';
+import axiosRetry from 'axios-retry';
+import { nanoid } from '@sa/utils';
+import { createAxiosConfig, createDefaultOptions, createRetryOptions } from './options';
+import { BACKEND_ERROR_CODE, REQUEST_ID_KEY } from './constant';
+import type {
+  CustomAxiosRequestConfig,
+  FlatRequestInstance,
+  MappedType,
+  RequestInstance,
+  RequestOption,
+  ResponseType
+} from './type';
+
+function createCommonRequest<ResponseData = any>(
+  axiosConfig?: CreateAxiosDefaults,
+  options?: Partial<RequestOption<ResponseData>>
+) {
+  const opts = createDefaultOptions<ResponseData>(options);
+
+  const axiosConf = createAxiosConfig(axiosConfig);
+  const instance = axios.create(axiosConf);
+
+  const cancelTokenSourceMap = new Map<string, CancelTokenSource>();
+
+  // config axios retry
+  const retryOptions = createRetryOptions(axiosConf);
+  axiosRetry(instance, retryOptions);
+
+  instance.interceptors.request.use(conf => {
+    const config: InternalAxiosRequestConfig = { ...conf };
+
+    // set request id
+    const requestId = nanoid();
+    config.headers.set(REQUEST_ID_KEY, requestId);
+
+    // config cancel token
+    const cancelTokenSource = axios.CancelToken.source();
+    config.cancelToken = cancelTokenSource.token;
+    cancelTokenSourceMap.set(requestId, cancelTokenSource);
+
+    // handle config by hook
+    const handledConfig = opts.onRequest?.(config) || config;
+
+    return handledConfig;
+  });
+
+  instance.interceptors.response.use(
+    async response => {
+      if (opts.isBackendSuccess(response)) {
+        return Promise.resolve(response);
+      }
+
+      const fail = await opts.onBackendFail(response, instance);
+      if (fail) {
+        return fail;
+      }
+
+      const backendError = new AxiosError<ResponseData>(
+        'the backend request error',
+        BACKEND_ERROR_CODE,
+        response.config,
+        response.request,
+        response
+      );
+
+      await opts.onError(backendError);
+
+      return Promise.reject(backendError);
+    },
+    async (error: AxiosError<ResponseData>) => {
+      await opts.onError(error);
+
+      return Promise.reject(error);
+    }
+  );
+
+  function cancelRequest(requestId: string) {
+    const cancelTokenSource = cancelTokenSourceMap.get(requestId);
+    if (cancelTokenSource) {
+      cancelTokenSource.cancel();
+      cancelTokenSourceMap.delete(requestId);
+    }
+  }
+
+  function cancelAllRequest() {
+    cancelTokenSourceMap.forEach(cancelTokenSource => {
+      cancelTokenSource.cancel();
+    });
+    cancelTokenSourceMap.clear();
+  }
+
+  return {
+    instance,
+    opts,
+    cancelRequest,
+    cancelAllRequest
+  };
+}
+
+/**
+ * create a request instance
+ *
+ * @param axiosConfig axios config
+ * @param options request options
+ */
+export function createRequest<ResponseData = any, State = Record<string, unknown>>(
+  axiosConfig?: CreateAxiosDefaults,
+  options?: Partial<RequestOption<ResponseData>>
+) {
+  const { instance, opts, cancelRequest, cancelAllRequest } = createCommonRequest<ResponseData>(axiosConfig, options);
+
+  const request: RequestInstance<State> = async function request<T = any, R extends ResponseType = 'json'>(
+    config: CustomAxiosRequestConfig
+  ) {
+    const response: AxiosResponse<ResponseData> = await instance(config);
+
+    const responseType = response.config?.responseType || 'json';
+
+    if (responseType === 'json') {
+      return opts.transformBackendResponse(response);
+    }
+
+    return response.data as MappedType<R, T>;
+  } as RequestInstance<State>;
+
+  request.cancelRequest = cancelRequest;
+  request.cancelAllRequest = cancelAllRequest;
+
+  return request;
+}
+
+/**
+ * create a flat request instance
+ *
+ * The response data is a flat object: { data: any, error: AxiosError }
+ *
+ * @param axiosConfig axios config
+ * @param options request options
+ */
+export function createFlatRequest<ResponseData = any, State = Record<string, unknown>>(
+  axiosConfig?: CreateAxiosDefaults,
+  options?: Partial<RequestOption<ResponseData>>
+) {
+  const { instance, opts, cancelRequest, cancelAllRequest } = createCommonRequest<ResponseData>(axiosConfig, options);
+
+  const flatRequest: FlatRequestInstance<State> = async function flatRequest<T = any, R extends ResponseType = 'json'>(
+    config: CustomAxiosRequestConfig
+  ) {
+    try {
+      const response: AxiosResponse<ResponseData> = await instance(config);
+
+      const responseType = response.config?.responseType || 'json';
+
+      if (responseType === 'json') {
+        const data = opts.transformBackendResponse(response);
+
+        return { data, error: null };
+      }
+
+      return { data: response.data as MappedType<R, T>, error: null };
+    } catch (error) {
+      return { data: null, error };
+    }
+  } as FlatRequestInstance<State>;
+
+  flatRequest.cancelRequest = cancelRequest;
+  flatRequest.cancelAllRequest = cancelAllRequest;
+  flatRequest.state = {} as State;
+
+  return flatRequest;
+}
+
+export { BACKEND_ERROR_CODE, REQUEST_ID_KEY };
+export type * from './type';
+export type { CreateAxiosDefaults, AxiosError };

packages/axios/src/options.ts

@@ -0,0 +1,48 @@
+import type { CreateAxiosDefaults } from 'axios';
+import type { IAxiosRetryConfig } from 'axios-retry';
+import { stringify } from 'qs';
+import { isHttpSuccess } from './shared';
+import type { RequestOption } from './type';
+
+export function createDefaultOptions<ResponseData = any>(options?: Partial<RequestOption<ResponseData>>) {
+  const opts: RequestOption<ResponseData> = {
+    onRequest: async config => config,
+    isBackendSuccess: _response => true,
+    onBackendFail: async () => {},
+    transformBackendResponse: async response => response.data,
+    onError: async () => {}
+  };
+
+  Object.assign(opts, options);
+
+  return opts;
+}
+
+export function createRetryOptions(config?: Partial<CreateAxiosDefaults>) {
+  const retryConfig: IAxiosRetryConfig = {
+    retries: 3
+  };
+
+  Object.assign(retryConfig, config);
+
+  return retryConfig;
+}
+
+export function createAxiosConfig(config?: Partial<CreateAxiosDefaults>) {
+  const TEN_SECONDS = 10 * 1000;
+
+  const axiosConfig: CreateAxiosDefaults = {
+    timeout: TEN_SECONDS,
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    validateStatus: isHttpSuccess,
+    paramsSerializer: params => {
+      return stringify(params);
+    }
+  };
+
+  Object.assign(axiosConfig, config);
+
+  return axiosConfig;
+}

packages/axios/src/shared.ts

@@ -0,0 +1,28 @@
+import type { AxiosHeaderValue, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+export function getContentType(config: InternalAxiosRequestConfig) {
+  const contentType: AxiosHeaderValue = config.headers?.['Content-Type'] || 'application/json';
+
+  return contentType;
+}
+
+/**
+ * check if http status is success
+ *
+ * @param status
+ */
+export function isHttpSuccess(status: number) {
+  const isSuccessCode = status >= 200 && status < 300;
+  return isSuccessCode || status === 304;
+}
+
+/**
+ * is response json
+ *
+ * @param response axios response
+ */
+export function isResponseJson(response: AxiosResponse) {
+  const { responseType } = response.config;
+
+  return responseType === 'json' || responseType === undefined;
+}

packages/axios/src/type.ts

@@ -0,0 +1,99 @@
+import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+export type ContentType =
+  | 'text/html'
+  | 'text/plain'
+  | 'multipart/form-data'
+  | 'application/json'
+  | 'application/x-www-form-urlencoded'
+  | 'application/octet-stream';
+
+export interface RequestOption<ResponseData = any> {
+  /**
+   * The hook before request
+   *
+   * For example: You can add header token in this hook
+   *
+   * @param config Axios config
+   */
+  onRequest: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>;
+  /**
+   * The hook to check backend response is success or not
+   *
+   * @param response Axios response
+   */
+  isBackendSuccess: (response: AxiosResponse<ResponseData>) => boolean;
+  /**
+   * The hook after backend request fail
+   *
+   * For example: You can handle the expired token in this hook
+   *
+   * @param response Axios response
+   * @param instance Axios instance
+   */
+  onBackendFail: (
+    response: AxiosResponse<ResponseData>,
+    instance: AxiosInstance
+  ) => Promise<AxiosResponse | null> | Promise<void>;
+  /**
+   * transform backend response when the responseType is json
+   *
+   * @param response Axios response
+   */
+  transformBackendResponse(response: AxiosResponse<ResponseData>): any | Promise<any>;
+  /**
+   * The hook to handle error
+   *
+   * For example: You can show error message in this hook
+   *
+   * @param error
+   */
+  onError: (error: AxiosError<ResponseData>) => void | Promise<void>;
+}
+
+interface ResponseMap {
+  blob: Blob;
+  text: string;
+  arrayBuffer: ArrayBuffer;
+  stream: ReadableStream<Uint8Array>;
+  document: Document;
+}
+export type ResponseType = keyof ResponseMap | 'json';
+
+export type MappedType<R extends ResponseType, JsonType = any> = R extends keyof ResponseMap
+  ? ResponseMap[R]
+  : JsonType;
+
+export type CustomAxiosRequestConfig<R extends ResponseType = 'json'> = Omit<AxiosRequestConfig, 'responseType'> & {
+  responseType?: R;
+};
+
+export interface RequestInstanceCommon<T> {
+  cancelRequest: (requestId: string) => void;
+  cancelAllRequest: () => void;
+  /** you can set custom state in the request instance */
+  state: T;
+}
+
+/** The request instance */
+export interface RequestInstance<S = Record<string, unknown>> extends RequestInstanceCommon<S> {
+  <T = any, R extends ResponseType = 'json'>(config: CustomAxiosRequestConfig<R>): Promise<MappedType<R, T>>;
+}
+
+export type FlatResponseSuccessData<T = any> = {
+  data: T;
+  error: null;
+};
+
+export type FlatResponseFailData<T = any> = {
+  data: null;
+  error: AxiosError<T>;
+};
+
+export type FlatResponseData<T = any> = FlatResponseSuccessData<T> | FlatResponseFailData<T>;
+
+export interface FlatRequestInstance<S = Record<string, unknown>> extends RequestInstanceCommon<S> {
+  <T = any, R extends ResponseType = 'json'>(
+    config: CustomAxiosRequestConfig<R>
+  ): Promise<FlatResponseData<MappedType<R, T>>>;
+}

packages/axios/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

packages/color-palette/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@sa/color-palette",
+  "version": "1.0.0-beta.2",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["./src/*"]
+    }
+  },
+  "dependencies": {
+    "colord": "2.9.3"
+  }
+}

packages/color-palette/src/color.ts

@@ -0,0 +1,29 @@
+import { colord, extend } from 'colord';
+import type { HslColor } from 'colord';
+import labPlugin from 'colord/plugins/lab';
+
+extend([labPlugin]);
+
+export function isValidColor(color: string) {
+  return colord(color).isValid();
+}
+
+export function getHex(color: string) {
+  return colord(color).toHex();
+}
+
+export function getRgb(color: string) {
+  return colord(color).toRgb();
+}
+
+export function getHsl(color: string) {
+  return colord(color).toHsl();
+}
+
+export function getDeltaE(color1: string, color2: string) {
+  return colord(color1).delta(color2);
+}
+
+export function transformHslToHex(color: HslColor) {
+  return colord(color).toHex();
+}

packages/color-palette/src/index.ts

@@ -0,0 +1,56 @@
+import { getColorPaletteFamily } from './palette';
+import { getColorName } from './name';
+import type { ColorPalette, ColorPaletteFamily, ColorPaletteItem, ColorPaletteNumber } from './type';
+import defaultPalettes from './json/palette.json';
+
+/**
+ * Get color palette by provided color and color name
+ *
+ * @param color The provided color
+ * @param colorName Color name
+ */
+export function getColorPalette(color: string, colorName: string) {
+  const colorPaletteFamily = getColorPaletteFamily(color, colorName);
+
+  const colorMap = new Map<ColorPaletteNumber, ColorPaletteItem>();
+
+  colorPaletteFamily.palettes.forEach(palette => {
+    colorMap.set(palette.number, palette);
+  });
+
+  const mainColor = colorMap.get(500) as ColorPaletteItem;
+  const matchColor = colorPaletteFamily.palettes.find(palette => palette.hexcode === color) as ColorPaletteItem;
+
+  const colorPalette: ColorPalette = {
+    ...colorPaletteFamily,
+    colorMap,
+    main: mainColor,
+    match: matchColor
+  };
+
+  return colorPalette;
+}
+
+/**
+ * Get color by color palette number
+ *
+ * @param color Color
+ * @param num Color palette number
+ * @returns Color hexcode
+ */
+export function getColorByColorPaletteNumber(color: string, num: ColorPaletteNumber) {
+  const colorPalette = getColorPalette(color, color);
+
+  const colorItem = colorPalette.colorMap.get(num) as ColorPaletteItem;
+
+  return colorItem.hexcode;
+}
+
+export default getColorPalette;
+
+/** The builtin color palettes */
+const colorPalettes = defaultPalettes as ColorPaletteFamily[];
+
+export { getColorName, colorPalettes };
+
+export type { ColorPalette, ColorPaletteNumber, ColorPaletteItem, ColorPaletteFamily };

packages/color-palette/src/json/palette.json

@@ -0,0 +1,274 @@
+[
+  {
+    "key": "red",
+    "palettes": [
+      { "hexcode": "#fef2f2", "number": 50, "name": "Bridesmaid" },
+      { "hexcode": "#fee2e2", "number": 100, "name": "Pippin" },
+      { "hexcode": "#fecaca", "number": 200, "name": "Your Pink" },
+      { "hexcode": "#fca5a5", "number": 300, "name": "Cornflower Lilac" },
+      { "hexcode": "#f87171", "number": 400, "name": "Bittersweet" },
+      { "hexcode": "#ef4444", "number": 500, "name": "Cinnabar" },
+      { "hexcode": "#dc2626", "number": 600, "name": "Persian Red" },
+      { "hexcode": "#b91c1c", "number": 700, "name": "Thunderbird" },
+      { "hexcode": "#991b1b", "number": 800, "name": "Old Brick" },
+      { "hexcode": "#7f1d1d", "number": 900, "name": "Falu Red" },
+      { "hexcode": "#450a0a", "number": 950, "name": "Mahogany" }
+    ]
+  },
+  {
+    "key": "orange",
+    "palettes": [
+      { "hexcode": "#fff7ed", "number": 50, "name": "Serenade" },
+      { "hexcode": "#ffedd5", "number": 100, "name": "Derby" },
+      { "hexcode": "#fed7aa", "number": 200, "name": "Caramel" },
+      { "hexcode": "#fdba74", "number": 300, "name": "Macaroni and Cheese" },
+      { "hexcode": "#fb923c", "number": 400, "name": "Neon Carrot" },
+      { "hexcode": "#f97316", "number": 500, "name": "Ecstasy" },
+      { "hexcode": "#ea580c", "number": 600, "name": "Trinidad" },
+      { "hexcode": "#c2410c", "number": 700, "name": "Tia Maria" },
+      { "hexcode": "#9a3412", "number": 800, "name": "Tabasco" },
+      { "hexcode": "#7c2d12", "number": 900, "name": "Pueblo" },
+      { "hexcode": "#431407", "number": 950, "name": "Rebel" }
+    ]
+  },
+  {
+    "key": "amber",
+    "palettes": [
+      { "hexcode": "#fffbeb", "number": 50, "name": "Island Spice" },
+      { "hexcode": "#fef3c7", "number": 100, "name": "Beeswax" },
+      { "hexcode": "#fde68a", "number": 200, "name": "Sweet Corn" },
+      { "hexcode": "#fcd34d", "number": 300, "name": "Mustard" },
+      { "hexcode": "#fbbf24", "number": 400, "name": "Lightning Yellow" },
+      { "hexcode": "#f59e0b", "number": 500, "name": "California" },
+      { "hexcode": "#d97706", "number": 600, "name": "Christine" },
+      { "hexcode": "#b45309", "number": 700, "name": "Vesuvius" },
+      { "hexcode": "#92400e", "number": 800, "name": "Korma" },
+      { "hexcode": "#78350f", "number": 900, "name": "Copper Canyon" },
+      { "hexcode": "#451a03", "number": 950, "name": "Brown Pod" }
+    ]
+  },
+  {
+    "key": "yellow",
+    "palettes": [
+      { "hexcode": "#fefce8", "number": 50, "name": "Orange White" },
+      { "hexcode": "#fef9c3", "number": 100, "name": "Lemon Chiffon" },
+      { "hexcode": "#fef08a", "number": 200, "name": "Sweet Corn" },
+      { "hexcode": "#fde047", "number": 300, "name": "Bright Sun" },
+      { "hexcode": "#facc15", "number": 400, "name": "Candlelight" },
+      { "hexcode": "#eab308", "number": 500, "name": "Corn" },
+      { "hexcode": "#ca8a04", "number": 600, "name": "Pirate Gold" },
+      { "hexcode": "#a16207", "number": 700, "name": "Mai Tai" },
+      { "hexcode": "#854d0e", "number": 800, "name": "Korma" },
+      { "hexcode": "#713f12", "number": 900, "name": "Sepia" },
+      { "hexcode": "#422006", "number": 950, "name": "Dark Ebony" }
+    ]
+  },
+  {
+    "key": "lime",
+    "palettes": [
+      { "hexcode": "#f7fee7", "number": 50, "name": "Spring Sun" },
+      { "hexcode": "#ecfccb", "number": 100, "name": "Chiffon" },
+      { "hexcode": "#d9f99d", "number": 200, "name": "Gossip" },
+      { "hexcode": "#bef264", "number": 300, "name": "Sulu" },
+      { "hexcode": "#a3e635", "number": 400, "name": "Conifer" },
+      { "hexcode": "#84cc16", "number": 500, "name": "Lima" },
+      { "hexcode": "#65a30d", "number": 600, "name": "Christi" },
+      { "hexcode": "#4d7c0f", "number": 700, "name": "Green Leaf" },
+      { "hexcode": "#3f6212", "number": 800, "name": "Dell" },
+      { "hexcode": "#365314", "number": 900, "name": "Clover" },
+      { "hexcode": "#1a2e05", "number": 950, "name": "Deep Forest Green" }
+    ]
+  },
+  {
+    "key": "green",
+    "palettes": [
+      { "hexcode": "#f0fdf4", "number": 50, "name": "Ottoman" },
+      { "hexcode": "#dcfce7", "number": 100, "name": "Blue Romance" },
+      { "hexcode": "#bbf7d0", "number": 200, "name": "Magic Mint" },
+      { "hexcode": "#86efac", "number": 300, "name": "Algae Green" },
+      { "hexcode": "#4ade80", "number": 400, "name": "Emerald" },
+      { "hexcode": "#22c55e", "number": 500, "name": "Malachite" },
+      { "hexcode": "#16a34a", "number": 600, "name": "Salem" },
+      { "hexcode": "#15803d", "number": 700, "name": "Jewel" },
+      { "hexcode": "#166534", "number": 800, "name": "Jewel" },
+      { "hexcode": "#14532d", "number": 900, "name": "Green Pea" },
+      { "hexcode": "#052e16", "number": 950, "name": "English Holly" }
+    ]
+  },
+  {
+    "key": "emerald",
+    "palettes": [
+      { "hexcode": "#ecfdf5", "number": 50, "name": "White Ice" },
+      { "hexcode": "#d1fae5", "number": 100, "name": "Granny Apple" },
+      { "hexcode": "#a7f3d0", "number": 200, "name": "Magic Mint" },
+      { "hexcode": "#6ee7b7", "number": 300, "name": "Bermuda" },
+      { "hexcode": "#34d399", "number": 400, "name": "Shamrock" },
+      { "hexcode": "#10b981", "number": 500, "name": "Mountain Meadow" },
+      { "hexcode": "#059669", "number": 600, "name": "Green Haze" },
+      { "hexcode": "#047857", "number": 700, "name": "Watercourse" },
+      { "hexcode": "#065f46", "number": 800, "name": "Watercourse" },
+      { "hexcode": "#064e3b", "number": 900, "name": "Evening Sea" },
+      { "hexcode": "#022c22", "number": 950, "name": "Burnham" }
+    ]
+  },
+  {
+    "key": "teal",
+    "palettes": [
+      { "hexcode": "#f0fdfa", "number": 50, "name": "White Ice" },
+      { "hexcode": "#ccfbf1", "number": 100, "name": "Scandal" },
+      { "hexcode": "#99f6e4", "number": 200, "name": "Ice Cold" },
+      { "hexcode": "#5eead4", "number": 300, "name": "Turquoise Blue" },
+      { "hexcode": "#2dd4bf", "number": 400, "name": "Turquoise" },
+      { "hexcode": "#14b8a6", "number": 500, "name": "Java" },
+      { "hexcode": "#0d9488", "number": 600, "name": "Blue Chill" },
+      { "hexcode": "#0f766e", "number": 700, "name": "Genoa" },
+      { "hexcode": "#115e59", "number": 800, "name": "Eden" },
+      { "hexcode": "#134e4a", "number": 900, "name": "Eden" },
+      { "hexcode": "#042f2e", "number": 950, "name": "Tiber" }
+    ]
+  },
+  {
+    "key": "cyan",
+    "palettes": [
+      { "hexcode": "#ecfeff", "number": 50, "name": "Bubbles" },
+      { "hexcode": "#cffafe", "number": 100, "name": "Oyster Bay" },
+      { "hexcode": "#a5f3fc", "number": 200, "name": "Anakiwa" },
+      { "hexcode": "#67e8f9", "number": 300, "name": "Spray" },
+      { "hexcode": "#22d3ee", "number": 400, "name": "Bright Turquoise" },
+      { "hexcode": "#06b6d4", "number": 500, "name": "Cerulean" },
+      { "hexcode": "#0891b2", "number": 600, "name": "Bondi Blue" },
+      { "hexcode": "#0e7490", "number": 700, "name": "Blue Chill" },
+      { "hexcode": "#155e75", "number": 800, "name": "Blumine" },
+      { "hexcode": "#164e63", "number": 900, "name": "Chathams Blue" },
+      { "hexcode": "#083344", "number": 950, "name": "Tarawera" }
+    ]
+  },
+  {
+    "key": "sky",
+    "palettes": [
+      { "hexcode": "#f0f9ff", "number": 50, "name": "Alice Blue" },
+      { "hexcode": "#e0f2fe", "number": 100, "name": "Pattens Blue" },
+      { "hexcode": "#bae6fd", "number": 200, "name": "French Pass" },
+      { "hexcode": "#7dd3fc", "number": 300, "name": "Malibu" },
+      { "hexcode": "#38bdf8", "number": 400, "name": "Picton Blue" },
+      { "hexcode": "#0ea5e9", "number": 500, "name": "Cerulean" },
+      { "hexcode": "#0284c7", "number": 600, "name": "Lochmara" },
+      { "hexcode": "#0369a1", "number": 700, "name": "Bahama Blue" },
+      { "hexcode": "#075985", "number": 800, "name": "Venice Blue" },
+      { "hexcode": "#0c4a6e", "number": 900, "name": "Chathams Blue" },
+      { "hexcode": "#082f49", "number": 950, "name": "Blue Whale" }
+    ]
+  },
+  {
+    "key": "blue",
+    "palettes": [
+      { "hexcode": "#eff6ff", "number": 50, "name": "Zumthor" },
+      { "hexcode": "#dbeafe", "number": 100, "name": "Hawkes Blue" },
+      { "hexcode": "#bfdbfe", "number": 200, "name": "Tropical Blue" },
+      { "hexcode": "#93c5fd", "number": 300, "name": "Malibu" },
+      { "hexcode": "#60a5fa", "number": 400, "name": "Cornflower Blue" },
+      { "hexcode": "#3b82f6", "number": 500, "name": "Dodger Blue" },
+      { "hexcode": "#2563eb", "number": 600, "name": "Royal Blue" },
+      { "hexcode": "#1d4ed8", "number": 700, "name": "Cerulean Blue" },
+      { "hexcode": "#1e40af", "number": 800, "name": "Persian Blue" },
+      { "hexcode": "#1e3a8a", "number": 900, "name": "Bay of Many" },
+      { "hexcode": "#172554", "number": 950, "name": "Bunting" }
+    ]
+  },
+  {
+    "key": "indigo",
+    "palettes": [
+      { "hexcode": "#eef2ff", "number": 50, "name": "Zircon" },
+      { "hexcode": "#e0e7ff", "number": 100, "name": "Hawkes Blue" },
+      { "hexcode": "#c7d2fe", "number": 200, "name": "Periwinkle" },
+      { "hexcode": "#a5b4fc", "number": 300, "name": "Perano" },
+      { "hexcode": "#818cf8", "number": 400, "name": "Portage" },
+      { "hexcode": "#6366f1", "number": 500, "name": "Royal Blue" },
+      { "hexcode": "#4f46e5", "number": 600, "name": "Royal Blue" },
+      { "hexcode": "#4338ca", "number": 700, "name": "Governor Bay" },
+      { "hexcode": "#3730a3", "number": 800, "name": "Governor Bay" },
+      { "hexcode": "#312e81", "number": 900, "name": "Minsk" },
+      { "hexcode": "#1e1b4b", "number": 950, "name": "Port Gore" }
+    ]
+  },
+  {
+    "key": "violet",
+    "palettes": [
+      { "hexcode": "#f5f3ff", "number": 50, "name": "Titan White" },
+      { "hexcode": "#ede9fe", "number": 100, "name": "Titan White" },
+      { "hexcode": "#ddd6fe", "number": 200, "name": "Fog" },
+      { "hexcode": "#c4b5fd", "number": 300, "name": "Melrose" },
+      { "hexcode": "#a78bfa", "number": 400, "name": "Dull Lavender" },
+      { "hexcode": "#8b5cf6", "number": 500, "name": "Medium Purple" },
+      { "hexcode": "#7c3aed", "number": 600, "name": "Purple Heart" },
+      { "hexcode": "#6d28d9", "number": 700, "name": "Purple Heart" },
+      { "hexcode": "#5b21b6", "number": 800, "name": "Purple Heart" },
+      { "hexcode": "#4c1d95", "number": 900, "name": "Daisy Bush" },
+      { "hexcode": "#2e1065", "number": 950, "name": "Violent Violet" }
+    ]
+  },
+  {
+    "key": "purple",
+    "palettes": [
+      { "hexcode": "#faf5ff", "number": 50, "name": "Magnolia" },
+      { "hexcode": "#f3e8ff", "number": 100, "name": "Blue Chalk" },
+      { "hexcode": "#e9d5ff", "number": 200, "name": "Blue Chalk" },
+      { "hexcode": "#d8b4fe", "number": 300, "name": "Mauve" },
+      { "hexcode": "#c084fc", "number": 400, "name": "Heliotrope" },
+      { "hexcode": "#a855f7", "number": 500, "name": "Medium Purple" },
+      { "hexcode": "#9333ea", "number": 600, "name": "Electric Violet" },
+      { "hexcode": "#7e22ce", "number": 700, "name": "Purple Heart" },
+      { "hexcode": "#6b21a8", "number": 800, "name": "Seance" },
+      { "hexcode": "#581c87", "number": 900, "name": "Daisy Bush" },
+      { "hexcode": "#3b0764", "number": 950, "name": "Christalle" }
+    ]
+  },
+  {
+    "key": "fuchsia",
+    "palettes": [
+      { "hexcode": "#fdf4ff", "number": 50, "name": "White Pointer" },
+      { "hexcode": "#fae8ff", "number": 100, "name": "White Pointer" },
+      { "hexcode": "#f5d0fe", "number": 200, "name": "Mauve" },
+      { "hexcode": "#f0abfc", "number": 300, "name": "Mauve" },
+      { "hexcode": "#e879f9", "number": 400, "name": "Heliotrope" },
+      { "hexcode": "#d946ef", "number": 500, "name": "Heliotrope" },
+      { "hexcode": "#c026d3", "number": 600, "name": "Fuchsia Pink" },
+      { "hexcode": "#a21caf", "number": 700, "name": "Violet Eggplant" },
+      { "hexcode": "#86198f", "number": 800, "name": "Seance" },
+      { "hexcode": "#701a75", "number": 900, "name": "Seance" },
+      { "hexcode": "#4a044e", "number": 950, "name": "Clairvoyant" }
+    ]
+  },
+  {
+    "key": "pink",
+    "palettes": [
+      { "hexcode": "#fdf2f8", "number": 50, "name": "Wisp Pink" },
+      { "hexcode": "#fce7f3", "number": 100, "name": "Carousel Pink" },
+      { "hexcode": "#fbcfe8", "number": 200, "name": "Classic Rose" },
+      { "hexcode": "#f9a8d4", "number": 300, "name": "Lavender Pink" },
+      { "hexcode": "#f472b6", "number": 400, "name": "Persian Pink" },
+      { "hexcode": "#ec4899", "number": 500, "name": "Brilliant Rose" },
+      { "hexcode": "#db2777", "number": 600, "name": "Cerise" },
+      { "hexcode": "#be185d", "number": 700, "name": "Maroon Flush" },
+      { "hexcode": "#9d174d", "number": 800, "name": "Disco" },
+      { "hexcode": "#831843", "number": 900, "name": "Disco" },
+      { "hexcode": "#500724", "number": 950, "name": "Cab Sav" }
+    ]
+  },
+  {
+    "key": "rose",
+    "palettes": [
+      { "hexcode": "#fff1f2", "number": 50, "name": "Lavender blush" },
+      { "hexcode": "#ffe4e6", "number": 100, "name": "Cosmos" },
+      { "hexcode": "#fecdd3", "number": 200, "name": "Pastel Pink" },
+      { "hexcode": "#fda4af", "number": 300, "name": "Sweet Pink" },
+      { "hexcode": "#fb7185", "number": 400, "name": "Froly" },
+      { "hexcode": "#f43f5e", "number": 500, "name": "Radical Red" },
+      { "hexcode": "#e11d48", "number": 600, "name": "Amaranth" },
+      { "hexcode": "#be123c", "number": 700, "name": "Cardinal" },
+      { "hexcode": "#9f1239", "number": 800, "name": "Shiraz" },
+      { "hexcode": "#881337", "number": 900, "name": "Claret" },
+      { "hexcode": "#4c0519", "number": 950, "name": "Cab Sav" }
+    ]
+  }
+]

packages/color-palette/src/name.ts

@@ -0,0 +1,46 @@
+import { getHex, getHsl, getRgb } from './color';
+import colorNames from './json/color-name.json';
+
+export function getColorName(color: string) {
+  const hex = getHex(color);
+  const rgb = getRgb(color);
+  const hsl = getHsl(color);
+
+  let ndf = 0;
+  let ndf1 = 0;
+  let ndf2 = 0;
+  let cl = -1;
+  let df = -1;
+
+  let name = '';
+
+  colorNames.some((item, index) => {
+    const [hexValue, colorName] = item;
+
+    const hexcode = `#${hexValue}`;
+
+    const match = hex === hexcode;
+
+    if (match) {
+      name = colorName;
+    } else {
+      const { r, g, b } = getRgb(hexcode);
+      const { h, s, l } = getHsl(hexcode);
+
+      ndf1 = (rgb.r - r) ** 2 + (rgb.g - g) ** 2 + (rgb.b - b) ** 2;
+      ndf2 = (hsl.h - h) ** 2 + (hsl.s - s) ** 2 + (hsl.l - l) ** 2;
+
+      ndf = ndf1 + ndf2 * 2;
+      if (df < 0 || df > ndf) {
+        df = ndf;
+        cl = index;
+      }
+    }
+
+    return match;
+  });
+
+  name = cl < 0 ? 'Invalid Color' : colorNames[cl][1];
+
+  return name;
+}

packages/color-palette/src/palette.ts

@@ -0,0 +1,95 @@
+import { getDeltaE, getHsl, isValidColor, transformHslToHex } from './color';
+import { getColorName } from './name';
+import type { ColorPaletteFamily, ColorPaletteFamilyWithNearestPalette } from './type';
+import defaultPalettes from './json/palette.json';
+
+export function getNearestColorPaletteFamily(color: string, families: ColorPaletteFamily[]) {
+  const familyWithConfig = families.map(family => {
+    const palettes = family.palettes.map(palette => {
+      return {
+        ...palette,
+        delta: getDeltaE(color, palette.hexcode)
+      };
+    });
+
+    const nearestPalette = palettes.reduce((prev, curr) => (prev.delta < curr.delta ? prev : curr));
+
+    return {
+      ...family,
+      palettes,
+      nearestPalette
+    };
+  });
+
+  const nearestPaletteFamily = familyWithConfig.reduce((prev, curr) =>
+    prev.nearestPalette.delta < curr.nearestPalette.delta ? prev : curr
+  );
+
+  const { l } = getHsl(color);
+
+  const paletteFamily: ColorPaletteFamilyWithNearestPalette = {
+    ...nearestPaletteFamily,
+    nearestLightnessPalette: nearestPaletteFamily.palettes.reduce((prev, curr) => {
+      const { l: prevLightness } = getHsl(prev.hexcode);
+      const { l: currLightness } = getHsl(curr.hexcode);
+
+      const deltaPrev = Math.abs(prevLightness - l);
+      const deltaCurr = Math.abs(currLightness - l);
+
+      return deltaPrev < deltaCurr ? prev : curr;
+    })
+  };
+
+  return paletteFamily;
+}
+
+export function getColorPaletteFamily(color: string, colorName: string) {
+  if (!isValidColor(color)) {
+    throw new Error('Invalid color, please check color value!');
+  }
+
+  const { h: h1, s: s1 } = getHsl(color);
+
+  const { nearestLightnessPalette, palettes } = getNearestColorPaletteFamily(
+    color,
+    defaultPalettes as ColorPaletteFamily[]
+  );
+
+  const { number, hexcode } = nearestLightnessPalette;
+
+  const { h: h2, s: s2 } = getHsl(hexcode);
+
+  const deltaH = h1 - h2 || h2;
+
+  const sRatio = s1 / s2;
+
+  const colorPaletteFamily: ColorPaletteFamily = {
+    key: colorName,
+    palettes: palettes.map(palette => {
+      let hexValue = color;
+
+      const isSame = number === palette.number;
+
+      if (!isSame) {
+        const { h: h3, s: s3, l } = getHsl(palette.hexcode);
+
+        const newH = deltaH < 0 ? h3 + deltaH : deltaH;
+        const newS = s3 * sRatio;
+
+        hexValue = transformHslToHex({
+          h: newH,
+          s: newS,
+          l
+        });
+      }
+
+      return {
+        hexcode: hexValue,
+        number: palette.number,
+        name: getColorName(hexValue)
+      };
+    })
+  };
+
+  return colorPaletteFamily;
+}

packages/color-palette/src/type.ts

@@ -0,0 +1,49 @@
+/** The color palette number */
+export type ColorPaletteNumber = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+
+/** The color palette item */
+export type ColorPaletteItem = {
+  /** The color hexcode */
+  hexcode: string;
+  /**
+   * The color number
+   *
+   * @link {@link ColorPaletteNumber}
+   */
+  number: ColorPaletteNumber;
+  /** The color name */
+  name: string;
+};
+
+export type ColorPaletteFamily = {
+  /** The color palette family key */
+  key: string;
+  /** The color palette family's palettes */
+  palettes: ColorPaletteItem[];
+};
+
+export type ColorPaletteWithDelta = ColorPaletteItem & {
+  delta: number;
+};
+
+export type ColorPaletteItemWithName = ColorPaletteItem & {
+  name: string;
+};
+
+export type ColorPaletteFamilyWithNearestPalette = ColorPaletteFamily & {
+  nearestPalette: ColorPaletteWithDelta;
+  nearestLightnessPalette: ColorPaletteWithDelta;
+};
+
+export type ColorPalette = ColorPaletteFamily & {
+  /** The color map of the palette */
+  colorMap: Map<ColorPaletteNumber, ColorPaletteItem>;
+  /**
+   * The main color of the palette
+   *
+   * Which number is 500
+   */
+  main: ColorPaletteItemWithName;
+  /** The match color of the palette */
+  match: ColorPaletteItemWithName;
+};

packages/hooks/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@sa/hooks",
+  "version": "1.0.0-beta.2",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["./src/*"]
+    }
+  },
+  "dependencies": {
+    "@sa/axios": "workspace:*"
+  }
+}

packages/hooks/src/index.ts

@@ -0,0 +1,10 @@
+import useBoolean from './use-boolean';
+import useLoading from './use-loading';
+import useCountDown from './use-count-down';
+import useContext from './use-context';
+import useSvgIconRender from './use-svg-icon-render';
+import useHookTable from './use-table';
+
+export { useBoolean, useLoading, useCountDown, useContext, useSvgIconRender, useHookTable };
+
+export * from './use-table';

packages/hooks/src/use-boolean.ts

@@ -0,0 +1,31 @@
+import { ref } from 'vue';
+
+/**
+ * Boolean
+ *
+ * @param initValue Init value
+ */
+export default function useBoolean(initValue = false) {
+  const bool = ref(initValue);
+
+  function setBool(value: boolean) {
+    bool.value = value;
+  }
+  function setTrue() {
+    setBool(true);
+  }
+  function setFalse() {
+    setBool(false);
+  }
+  function toggle() {
+    setBool(!bool.value);
+  }
+
+  return {
+    bool,
+    setBool,
+    setTrue,
+    setFalse,
+    toggle
+  };
+}

packages/hooks/src/use-context.ts

@@ -0,0 +1,96 @@
+import { inject, provide } from 'vue';
+import type { InjectionKey } from 'vue';
+
+/**
+ * Use context
+ *
+ * @example
+ *   ```ts
+ *   // there are three vue files: A.vue, B.vue, C.vue, and A.vue is the parent component of B.vue and C.vue
+ *
+ *   // context.ts
+ *   import { ref } from 'vue';
+ *   import { useContext } from '@sa/hooks';
+ *
+ *   export const { setupStore, useStore } = useContext('demo', () => {
+ *     const count = ref(0);
+ *
+ *     function increment() {
+ *       count.value++;
+ *     }
+ *
+ *     function decrement() {
+ *       count.value--;
+ *     }
+ *
+ *     return {
+ *       count,
+ *       increment,
+ *       decrement
+ *     };
+ *   })
+ *   ``` // A.vue
+ *   ```vue
+ *   <template>
+ *     <div>A</div>
+ *   </template>
+ *   <script setup lang="ts">
+ *   import { setupStore } from './context';
+ *
+ *   setupStore();
+ *   // const { increment } = setupStore(); // also can control the store in the parent component
+ *   </script>
+ *   ``` // B.vue
+ *   ```vue
+ *   <template>
+ *    <div>B</div>
+ *   </template>
+ *   <script setup lang="ts">
+ *   import { useStore } from './context';
+ *
+ *   const { count, increment } = useStore();
+ *   </script>
+ *   ```;
+ *
+ *   // C.vue is same as B.vue
+ *
+ * @param contextName Context name
+ * @param fn Context function
+ */
+export default function useContext<T extends (...args: any[]) => any>(contextName: string, fn: T) {
+  type Context = ReturnType<T>;
+
+  const { useProvide, useInject: useStore } = createContext<Context>(contextName);
+
+  function setupStore(...args: Parameters<T>) {
+    const context: Context = fn(...args);
+    return useProvide(context);
+  }
+
+  return {
+    /** Setup store in the parent component */
+    setupStore,
+    /** Use store in the child component */
+    useStore
+  };
+}
+
+/** Create context */
+function createContext<T>(contextName: string) {
+  const injectKey: InjectionKey<T> = Symbol(contextName);
+
+  function useProvide(context: T) {
+    provide(injectKey, context);
+
+    return context;
+  }
+
+  function useInject() {
+    return inject(injectKey) as T;
+  }
+
+  return {
+    useProvide,
+    useInject
+  };
+}

packages/hooks/src/use-count-down.ts

@@ -0,0 +1,49 @@
+import { computed, onScopeDispose, ref } from 'vue';
+import { useRafFn } from '@vueuse/core';
+
+/**
+ * count down
+ *
+ * @param seconds - count down seconds
+ */
+export default function useCountDown(seconds: number) {
+  const FPS_PER_SECOND = 60;
+
+  const fps = ref(0);
+
+  const count = computed(() => Math.ceil(fps.value / FPS_PER_SECOND));
+
+  const isCounting = computed(() => fps.value > 0);
+
+  const { pause, resume } = useRafFn(
+    () => {
+      if (fps.value > 0) {
+        fps.value -= 1;
+      } else {
+        pause();
+      }
+    },
+    { immediate: false }
+  );
+
+  function start(updateSeconds: number = seconds) {
+    fps.value = FPS_PER_SECOND * updateSeconds;
+    resume();
+  }
+
+  function stop() {
+    fps.value = 0;
+    pause();
+  }
+
+  onScopeDispose(() => {
+    pause();
+  });
+
+  return {
+    count,
+    isCounting,
+    start,
+    stop
+  };
+}

packages/hooks/src/use-loading.ts

@@ -1,6 +1,11 @@
-import useBoolean from './useBoolean';
+import useBoolean from './use-boolean';
 
-export default function useLoading(initValue: boolean = false) {
+/**
+ * Loading
+ *
+ * @param initValue Init value
+ */
+export default function useLoading(initValue = false) {
   const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initValue);
 
   return {

packages/hooks/src/use-request.ts

@@ -0,0 +1,79 @@
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { createFlatRequest } from '@sa/axios';
+import type {
+  AxiosError,
+  CreateAxiosDefaults,
+  CustomAxiosRequestConfig,
+  MappedType,
+  RequestOption,
+  ResponseType
+} from '@sa/axios';
+import useLoading from './use-loading';
+
+export type HookRequestInstanceResponseSuccessData<T = any> = {
+  data: Ref<T>;
+  error: Ref<null>;
+};
+
+export type HookRequestInstanceResponseFailData<T = any> = {
+  data: Ref<null>;
+  error: Ref<AxiosError<T>>;
+};
+
+export type HookRequestInstanceResponseData<T = any> = {
+  loading: Ref<boolean>;
+} & (HookRequestInstanceResponseSuccessData<T> | HookRequestInstanceResponseFailData<T>);
+
+export interface HookRequestInstance {
+  <T = any, R extends ResponseType = 'json'>(
+    config: CustomAxiosRequestConfig
+  ): HookRequestInstanceResponseData<MappedType<R, T>>;
+  cancelRequest: (requestId: string) => void;
+  cancelAllRequest: () => void;
+}
+
+/**
+ * create a hook request instance
+ *
+ * @param axiosConfig
+ * @param options
+ */
+export default function createHookRequest<ResponseData = any>(
+  axiosConfig?: CreateAxiosDefaults,
+  options?: Partial<RequestOption<ResponseData>>
+) {
+  const request = createFlatRequest<ResponseData>(axiosConfig, options);
+
+  const hookRequest: HookRequestInstance = function hookRequest<T = any, R extends ResponseType = 'json'>(
+    config: CustomAxiosRequestConfig
+  ) {
+    const { loading, startLoading, endLoading } = useLoading();
+
+    const data = ref<MappedType<R, T> | null>(null);
+    const error = ref<AxiosError<MappedType<R, T>> | null>(null);
+
+    startLoading();
+
+    request(config).then(res => {
+      if (res.data) {
+        data.value = res.data;
+      } else {
+        error.value = res.error;
+      }
+
+      endLoading();
+    });
+
+    return {
+      loading,
+      data,
+      error
+    };
+  } as HookRequestInstance;
+
+  hookRequest.cancelRequest = request.cancelRequest;
+  hookRequest.cancelAllRequest = request.cancelAllRequest;
+
+  return hookRequest;
+}

packages/hooks/src/use-svg-icon-render.ts

@@ -0,0 +1,50 @@
+import { h } from 'vue';
+import type { Component } from 'vue';
+
+/**
+ * Svg icon render hook
+ *
+ * @param SvgIcon Svg icon component
+ */
+export default function useSvgIconRender(SvgIcon: Component) {
+  interface IconConfig {
+    /** Iconify icon name */
+    icon?: string;
+    /** Local icon name */
+    localIcon?: string;
+    /** Icon color */
+    color?: string;
+    /** Icon size */
+    fontSize?: number;
+  }
+
+  type IconStyle = Partial<Pick<CSSStyleDeclaration, 'color' | 'fontSize'>>;
+
+  /**
+   * Svg icon VNode
+   *
+   * @param config
+   */
+  const SvgIconVNode = (config: IconConfig) => {
+    const { color, fontSize, icon, localIcon } = config;
+
+    const style: IconStyle = {};
+
+    if (color) {
+      style.color = color;
+    }
+    if (fontSize) {
+      style.fontSize = `${fontSize}px`;
+    }
+
+    if (!icon && !localIcon) {
+      return undefined;
+    }
+
+    return () => h(SvgIcon, { icon, localIcon, style });
+  };
+
+  return {
+    SvgIconVNode
+  };
+}

packages/hooks/src/use-table.ts

@@ -0,0 +1,151 @@
+import { computed, reactive, ref } from 'vue';
+import type { Ref } from 'vue';
+import useBoolean from './use-boolean';
+import useLoading from './use-loading';
+
+export type MaybePromise<T> = T | Promise<T>;
+
+export type ApiFn = (args: any) => Promise<unknown>;
+
+export type TableColumnCheck = {
+  key: string;
+  title: string;
+  checked: boolean;
+};
+
+export type TableDataWithIndex<T> = T & { index: number };
+
+export type TransformedData<T> = {
+  data: TableDataWithIndex<T>[];
+  pageNum: number;
+  pageSize: number;
+  total: number;
+};
+
+export type Transformer<T, Response> = (response: Response) => TransformedData<T>;
+
+export type TableConfig<A extends ApiFn, T, C> = {
+  /** api function to get table data */
+  apiFn: A;
+  /** api params */
+  apiParams?: Parameters<A>[0];
+  /** transform api response to table data */
+  transformer: Transformer<T, Awaited<ReturnType<A>>>;
+  /** columns factory */
+  columns: () => C[];
+  /**
+   * get column checks
+   *
+   * @param columns
+   */
+  getColumnChecks: (columns: C[]) => TableColumnCheck[];
+  /**
+   * get columns
+   *
+   * @param columns
+   */
+  getColumns: (columns: C[], checks: TableColumnCheck[]) => C[];
+  /**
+   * callback when response fetched
+   *
+   * @param transformed transformed data
+   */
+  onFetched?: (transformed: TransformedData<T>) => MaybePromise<void>;
+  /**
+   * whether to get data immediately
+   *
+   * @default true
+   */
+  immediate?: boolean;
+};
+
+export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<A, T, C>) {
+  const { loading, startLoading, endLoading } = useLoading();
+  const { bool: empty, setBool: setEmpty } = useBoolean();
+
+  const { apiFn, apiParams, transformer, immediate = true, getColumnChecks, getColumns } = config;
+
+  const searchParams: NonNullable<Parameters<A>[0]> = reactive({ ...apiParams });
+
+  const allColumns = ref(config.columns()) as Ref<C[]>;
+
+  const data: Ref<T[]> = ref([]);
+
+  const columnChecks: Ref<TableColumnCheck[]> = ref(getColumnChecks(config.columns()));
+
+  const columns = computed(() => getColumns(allColumns.value, columnChecks.value));
+
+  function reloadColumns() {
+    allColumns.value = config.columns();
+
+    const checkMap = new Map(columnChecks.value.map(col => [col.key, col.checked]));
+
+    const defaultChecks = getColumnChecks(allColumns.value);
+
+    columnChecks.value = defaultChecks.map(col => ({
+      ...col,
+      checked: checkMap.get(col.key) ?? col.checked
+    }));
+  }
+
+  async function getData() {
+    startLoading();
+
+    const formattedParams = formatSearchParams(searchParams);
+
+    const response = await apiFn(formattedParams);
+
+    const transformed = transformer(response as Awaited<ReturnType<A>>);
+
+    data.value = transformed.data;
+
+    setEmpty(transformed.data.length === 0);
+
+    await config.onFetched?.(transformed);
+
+    endLoading();
+  }
+
+  function formatSearchParams(params: Record<string, unknown>) {
+    const formattedParams: Record<string, unknown> = {};
+
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== null && value !== undefined) {
+        formattedParams[key] = value;
+      }
+    });
+
+    return formattedParams;
+  }
+
+  /**
+   * update search params
+   *
+   * @param params
+   */
+  function updateSearchParams(params: Partial<Parameters<A>[0]>) {
+    Object.assign(searchParams, params);
+  }
+
+  /** reset search params */
+  function resetSearchParams() {
+    Object.assign(searchParams, apiParams);
+  }
+
+  if (immediate) {
+    getData();
+  }
+
+  return {
+    loading,
+    empty,
+    data,
+    columns,
+    columnChecks,
+    reloadColumns,
+    getData,
+    searchParams,
+    updateSearchParams,
+    resetSearchParams
+  };
+}

packages/hooks/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

packages/materials/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@sa/materials",
+  "version": "1.0.0-beta.2",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["./src/*"]
+    }
+  },
+  "dependencies": {
+    "@sa/utils": "workspace:*",
+    "simplebar-vue": "2.3.3"
+  },
+  "devDependencies": {
+    "typed-css-modules": "0.9.1"
+  }
+}

packages/materials/src/index.ts

@@ -0,0 +1,6 @@
+import AdminLayout, { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './libs/admin-layout';
+import PageTab from './libs/page-tab';
+import SimpleScrollbar from './libs/simple-scrollbar';
+
+export { AdminLayout, LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX, PageTab, SimpleScrollbar };
+export * from './types';

packages/materials/src/libs/admin-layout/index.module.css

@@ -0,0 +1,63 @@
+/* @type */
+
+.layout-header,
+.layout-header-placement {
+  height: var(--soy-header-height);
+}
+
+.layout-header {
+  z-index: var(--soy-header-z-index);
+}
+
+.layout-tab {
+  top: var(--soy-header-height);
+  height: var(--soy-tab-height);
+  z-index: var(--soy-tab-z-index);
+}
+
+.layout-tab-placement {
+  height: var(--soy-tab-height);
+}
+
+.layout-sider {
+  width: var(--soy-sider-width);
+  z-index: var(--soy-sider-z-index);
+}
+
+.layout-mobile-sider {
+  z-index: var(--soy-sider-z-index);
+}
+
+.layout-mobile-sider-mask {
+  z-index: var(--soy-mobile-sider-z-index);
+}
+
+.layout-sider_collapsed {
+  width: var(--soy-sider-collapsed-width);
+  z-index: var(--soy-sider-z-index);
+}
+
+.layout-footer,
+.layout-footer-placement {
+  height: var(--soy-footer-height);
+}
+
+.layout-footer {
+  z-index: var(--soy-footer-z-index);
+}
+
+.left-gap {
+  padding-left: var(--soy-sider-width);
+}
+
+.left-gap_collapsed {
+  padding-left: var(--soy-sider-collapsed-width);
+}
+
+.sider-padding-top {
+  padding-top: var(--soy-header-height);
+}
+
+.sider-padding-bottom {
+  padding-bottom: var(--soy-footer-height);
+}

packages/materials/src/libs/admin-layout/index.module.css.d.ts

@@ -0,0 +1,18 @@
+declare const styles: {
+  readonly 'layout-header': string;
+  readonly 'layout-header-placement': string;
+  readonly 'layout-tab': string;
+  readonly 'layout-tab-placement': string;
+  readonly 'layout-sider': string;
+  readonly 'layout-mobile-sider': string;
+  readonly 'layout-mobile-sider-mask': string;
+  readonly 'layout-sider_collapsed': string;
+  readonly 'layout-footer': string;
+  readonly 'layout-footer-placement': string;
+  readonly 'left-gap': string;
+  readonly 'left-gap_collapsed': string;
+  readonly 'sider-padding-top': string;
+  readonly 'sider-padding-bottom': string;
+};
+
+export default styles;

packages/materials/src/libs/admin-layout/index.ts

@@ -0,0 +1,5 @@
+import AdminLayout from './index.vue';
+import { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './shared';
+
+export default AdminLayout;
+export { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX };

packages/materials/src/libs/admin-layout/index.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AdminLayoutProps } from '../../types';
+import { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID, createLayoutCssVars } from './shared';
+import style from './index.module.css';
+
+defineOptions({
+  name: 'AdminLayout'
+});
+
+const props = withDefaults(defineProps<AdminLayoutProps>(), {
+  mode: 'vertical',
+  scrollMode: 'content',
+  scrollElId: LAYOUT_SCROLL_EL_ID,
+  commonClass: 'transition-all-300',
+  fixedTop: true,
+  maxZIndex: LAYOUT_MAX_Z_INDEX,
+  headerVisible: true,
+  headerHeight: 56,
+  tabVisible: true,
+  tabHeight: 48,
+  siderVisible: true,
+  siderCollapse: false,
+  siderWidth: 220,
+  siderCollapsedWidth: 64,
+  footerVisible: true,
+  footerHeight: 48,
+  rightFooter: false
+});
+
+interface Emits {
+  /** Update siderCollapse */
+  (e: 'update:siderCollapse', collapse: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+
+type SlotFn = (props?: Record<string, unknown>) => any;
+
+type Slots = {
+  /** Main */
+  default?: SlotFn;
+  /** Header */
+  header?: SlotFn;
+  /** Tab */
+  tab?: SlotFn;
+  /** Sider */
+  sider?: SlotFn;
+  /** Footer */
+  footer?: SlotFn;
+};
+
+const slots = defineSlots<Slots>();
+
+const cssVars = computed(() => createLayoutCssVars(props));
+
+// config visible
+const showHeader = computed(() => Boolean(slots.header) && props.headerVisible);
+const showTab = computed(() => Boolean(slots.tab) && props.tabVisible);
+const showSider = computed(() => !props.isMobile && Boolean(slots.sider) && props.siderVisible);
+const showMobileSider = computed(() => props.isMobile && Boolean(slots.sider) && props.siderVisible);
+const showFooter = computed(() => Boolean(slots.footer) && props.footerVisible);
+
+// scroll mode
+const isWrapperScroll = computed(() => props.scrollMode === 'wrapper');
+const isContentScroll = computed(() => props.scrollMode === 'content');
+
+// layout direction
+const isVertical = computed(() => props.mode === 'vertical');
+const isHorizontal = computed(() => props.mode === 'horizontal');
+
+const fixedHeaderAndTab = computed(() => props.fixedTop || (isHorizontal.value && isWrapperScroll.value));
+
+// css
+const leftGapClass = computed(() => {
+  if (!props.fullContent && showSider.value) {
+    return props.siderCollapse ? style['left-gap_collapsed'] : style['left-gap'];
+  }
+
+  return '';
+});
+
+const headerLeftGapClass = computed(() => (isVertical.value ? leftGapClass.value : ''));
+
+const footerLeftGapClass = computed(() => {
+  const condition1 = isVertical.value;
+  const condition2 = isHorizontal.value && isWrapperScroll.value && !props.fixedFooter;
+  const condition3 = Boolean(isHorizontal.value && props.rightFooter);
+
+  if (condition1 || condition2 || condition3) {
+    return leftGapClass.value;
+  }
+
+  return '';
+});
+
+const siderPaddingClass = computed(() => {
+  let cls = '';
+
+  if (showHeader.value && !headerLeftGapClass.value) {
+    cls += style['sider-padding-top'];
+  }
+  if (showFooter.value && !footerLeftGapClass.value) {
+    cls += ` ${style['sider-padding-bottom']}`;
+  }
+
+  return cls;
+});
+
+function handleClickMask() {
+  emit('update:siderCollapse', true);
+}
+</script>
+
+<template>
+  <div class="relative h-full" :class="[commonClass]" :style="cssVars">
+    <div
+      :id="isWrapperScroll ? scrollElId : undefined"
+      class="h-full flex flex-col"
+      :class="[commonClass, scrollWrapperClass, { 'overflow-y-auto': isWrapperScroll }]"
+    >
+      <!-- Header -->
+      <template v-if="showHeader">
+        <header
+          v-show="!fullContent"
+          class="flex-shrink-0"
+          :class="[
+            style['layout-header'],
+            commonClass,
+            headerClass,
+            headerLeftGapClass,
+            { 'absolute top-0 left-0 w-full': fixedHeaderAndTab }
+          ]"
+        >
+          <slot name="header"></slot>
+        </header>
+        <div
+          v-show="!fullContent && fixedHeaderAndTab"
+          class="flex-shrink-0 overflow-hidden"
+          :class="[style['layout-header-placement']]"
+        ></div>
+      </template>
+
+      <!-- Tab -->
+      <template v-if="showTab">
+        <div
+          class="flex-shrink-0"
+          :class="[
+            style['layout-tab'],
+            commonClass,
+            tabClass,
+            { 'top-0!': fullContent || !showHeader },
+            leftGapClass,
+            { 'absolute left-0 w-full': fixedHeaderAndTab }
+          ]"
+        >
+          <slot name="tab"></slot>
+        </div>
+        <div
+          v-show="fullContent || fixedHeaderAndTab"
+          class="flex-shrink-0 overflow-hidden"
+          :class="[style['layout-tab-placement']]"
+        ></div>
+      </template>
+
+      <!-- Sider -->
+      <template v-if="showSider">
+        <aside
+          v-show="!fullContent"
+          class="absolute left-0 top-0 h-full"
+          :class="[
+            commonClass,
+            siderClass,
+            siderPaddingClass,
+            siderCollapse ? style['layout-sider_collapsed'] : style['layout-sider']
+          ]"
+        >
+          <slot name="sider"></slot>
+        </aside>
+      </template>
+
+      <!-- Mobile Sider -->
+      <template v-if="showMobileSider">
+        <aside
+          class="absolute left-0 top-0 h-full w-0 bg-white"
+          :class="[
+            commonClass,
+            mobileSiderClass,
+            style['layout-mobile-sider'],
+            siderCollapse ? 'overflow-hidden' : style['layout-sider']
+          ]"
+        >
+          <slot name="sider"></slot>
+        </aside>
+        <div
+          v-show="!siderCollapse"
+          class="absolute left-0 top-0 h-full w-full bg-[rgba(0,0,0,0.2)]"
+          :class="[style['layout-mobile-sider-mask']]"
+          @click="handleClickMask"
+        ></div>
+      </template>
+
+      <!-- Main Content -->
+      <main
+        :id="isContentScroll ? scrollElId : undefined"
+        class="flex flex-grow flex-col"
+        :class="[commonClass, contentClass, leftGapClass, { 'overflow-y-auto': isContentScroll }]"
+      >
+        <slot></slot>
+      </main>
+
+      <!-- Footer -->
+      <template v-if="showFooter">
+        <footer
+          v-show="!fullContent"
+          class="flex-shrink-0"
+          :class="[
+            style['layout-footer'],
+            commonClass,
+            footerClass,
+            footerLeftGapClass,
+            { 'absolute left-0 bottom-0 w-full': fixedFooter }
+          ]"
+        >
+          <slot name="footer"></slot>
+        </footer>
+        <div
+          v-show="!fullContent && fixedFooter"
+          class="flex-shrink-0 overflow-hidden"
+          :class="[style['layout-footer-placement']]"
+        ></div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

packages/materials/src/libs/admin-layout/shared.ts

@@ -0,0 +1,68 @@
+import type { AdminLayoutProps, LayoutCssVars, LayoutCssVarsProps } from '../../types';
+
+/** The id of the scroll element of the layout */
+export const LAYOUT_SCROLL_EL_ID = '__SCROLL_EL_ID__';
+
+/** The max z-index of the layout */
+export const LAYOUT_MAX_Z_INDEX = 100;
+
+/**
+ * Create layout css vars by css vars props
+ *
+ * @param props Css vars props
+ */
+function createLayoutCssVarsByCssVarsProps(props: LayoutCssVarsProps) {
+  const cssVars: LayoutCssVars = {
+    '--soy-header-height': `${props.headerHeight}px`,
+    '--soy-header-z-index': props.headerZIndex,
+    '--soy-tab-height': `${props.tabHeight}px`,
+    '--soy-tab-z-index': props.tabZIndex,
+    '--soy-sider-width': `${props.siderWidth}px`,
+    '--soy-sider-collapsed-width': `${props.siderCollapsedWidth}px`,
+    '--soy-sider-z-index': props.siderZIndex,
+    '--soy-mobile-sider-z-index': props.mobileSiderZIndex,
+    '--soy-footer-height': `${props.footerHeight}px`,
+    '--soy-footer-z-index': props.footerZIndex
+  };
+
+  return cssVars;
+}
+
+/**
+ * Create layout css vars
+ *
+ * @param props
+ */
+export function createLayoutCssVars(props: AdminLayoutProps) {
+  const {
+    mode,
+    isMobile,
+    maxZIndex = LAYOUT_MAX_Z_INDEX,
+    headerHeight,
+    tabHeight,
+    siderWidth,
+    siderCollapsedWidth,
+    footerHeight
+  } = props;
+
+  const headerZIndex = maxZIndex - 3;
+  const tabZIndex = maxZIndex - 5;
+  const siderZIndex = mode === 'vertical' || isMobile ? maxZIndex - 1 : maxZIndex - 4;
+  const mobileSiderZIndex = isMobile ? maxZIndex - 2 : 0;
+  const footerZIndex = maxZIndex - 5;
+
+  const cssProps: LayoutCssVarsProps = {
+    headerHeight,
+    headerZIndex,
+    tabHeight,
+    tabZIndex,
+    siderWidth,
+    siderZIndex,
+    mobileSiderZIndex,
+    siderCollapsedWidth,
+    footerHeight,
+    footerZIndex
+  };
+
+  return createLayoutCssVarsByCssVarsProps(cssProps);
+}

packages/materials/src/libs/page-tab/button-tab.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { PageTabProps } from '../../types';
+import style from './index.module.css';
+
+defineOptions({
+  name: 'ButtonTab'
+});
+
+defineProps<PageTabProps>();
+
+type SlotFn = (props?: Record<string, unknown>) => any;
+
+type Slots = {
+  /**
+   * Slot
+   *
+   * The center content of the tab
+   */
+  default?: SlotFn;
+  /**
+   * Slot
+   *
+   * The left content of the tab
+   */
+  prefix?: SlotFn;
+  /**
+   * Slot
+   *
+   * The right content of the tab
+   */
+  suffix?: SlotFn;
+};
+
+defineSlots<Slots>();
+</script>
+
+<template>
+  <div
+    class=":soy: relative inline-flex cursor-pointer items-center justify-center gap-12px whitespace-nowrap border-1px rounded-4px border-solid px-12px py-4px"
+    :class="[
+      style['button-tab'],
+      { [style['button-tab_dark']]: darkMode },
+      { [style['button-tab_active']]: active },
+      { [style['button-tab_active_dark']]: active && darkMode }
+    ]"
+  >
+    <slot name="prefix"></slot>
+    <slot></slot>
+    <slot name="suffix"></slot>
+  </div>
+</template>
+
+<style scoped></style>

packages/materials/src/libs/page-tab/chrome-tab-bg.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'ChromeTabBg'
+});
+</script>
+
+<template>
+  <svg class="size-full">
+    <defs>
+      <symbol id="geometry-left" viewBox="0 0 214 36">
+        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
+      </symbol>
+      <symbol id="geometry-right" viewBox="0 0 214 36">
+        <use xlink:href="#geometry-left" />
+      </symbol>
+      <clipPath>
+        <rect width="100%" height="100%" x="0" />
+      </clipPath>
+    </defs>
+    <svg width="51%" height="100%">
+      <use xlink:href="#geometry-left" width="214" height="36" fill="currentColor" />
+    </svg>
+    <g transform="scale(-1, 1)">
+      <svg width="51%" height="100%" x="-100%" y="0">
+        <use xlink:href="#geometry-right" width="214" height="36" fill="currentColor" />
+      </svg>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>

packages/materials/src/libs/page-tab/chrome-tab.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { PageTabProps } from '../../types';
+import ChromeTabBg from './chrome-tab-bg.vue';
+import style from './index.module.css';
+
+defineOptions({
+  name: 'ChromeTab'
+});
+
+defineProps<PageTabProps>();
+
+type SlotFn = (props?: Record<string, unknown>) => any;
+
+type Slots = {
+  /**
+   * Slot
+   *
+   * The center content of the tab
+   */
+  default?: SlotFn;
+  /**
+   * Slot
+   *
+   * The left content of the tab
+   */
+  prefix?: SlotFn;
+  /**
+   * Slot
+   *
+   * The right content of the tab
+   */
+  suffix?: SlotFn;
+};
+
+defineSlots<Slots>();
+</script>
+
+<template>
+  <div
+    class=":soy: relative inline-flex cursor-pointer items-center justify-center gap-16px whitespace-nowrap px-24px py-6px -mr-18px"
+    :class="[
+      style['chrome-tab'],
+      { [style['chrome-tab_dark']]: darkMode },
+      { [style['chrome-tab_active']]: active },
+      { [style['chrome-tab_active_dark']]: active && darkMode }
+    ]"
+  >
+    <div class=":soy: pointer-events-none absolute left-0 top-0 h-full w-full -z-1" :class="[style['chrome-tab__bg']]">
+      <ChromeTabBg />
+    </div>
+    <slot name="prefix"></slot>
+    <slot></slot>
+    <slot name="suffix"></slot>
+    <div class=":soy: absolute right-7px h-16px w-1px bg-#1f2225" :class="[style['chrome-tab-divider']]"></div>
+  </div>
+</template>
+
+<style scoped></style>

packages/materials/src/libs/page-tab/index.module.css

@@ -0,0 +1,97 @@
+/* @type */
+
+.button-tab {
+  border-color: #e5e7eb;
+}
+
+.button-tab_dark {
+  border-color: #ffffff3d;
+}
+
+.button-tab:hover {
+  color: var(--soy-primary-color);
+  border-color: var(--soy-primary-color-opacity3);
+}
+
+.button-tab_active {
+  color: var(--soy-primary-color);
+  border-color: var(--soy-primary-color-opacity3);
+  background-color: var(--soy-primary-color-opacity1);
+}
+
+.button-tab_active_dark {
+  background-color: var(--soy-primary-color-opacity2);
+}
+
+.button-tab .svg-close:hover {
+  font-size: 12px;
+  color: #ffffff;
+  background-color: var(--soy-primary-color);
+}
+
+.button-tab_dark .svg-close:hover {
+  color: #000000;
+}
+
+.chrome-tab:hover {
+  z-index: 9;
+}
+
+.chrome-tab_active {
+  z-index: 10;
+  color: var(--soy-primary-color);
+}
+
+.chrome-tab__bg {
+  color: transparent;
+}
+
+.chrome-tab_active .chrome-tab__bg {
+  color: var(--soy-primary-color1);
+}
+
+.chrome-tab_active_dark .chrome-tab__bg {
+  color: var(--soy-primary-color2);
+}
+
+.chrome-tab:hover .chrome-tab__bg {
+  color: #dee1e6;
+}
+
+.chrome-tab_active:hover .chrome-tab__bg {
+  color: var(--soy-primary-color1);
+}
+
+.chrome-tab_dark:hover .chrome-tab__bg {
+  color: #333333;
+}
+
+.chrome-tab_active_dark:hover .chrome-tab__bg {
+  color: var(--soy-primary-color2);
+}
+
+.chrome-tab .svg-close:hover {
+  font-size: 12px;
+  color: #ffffff;
+  background-color: #9ca3af;
+}
+
+.chrome-tab_active .svg-close:hover {
+  background-color: var(--soy-primary-color);
+}
+
+.chrome-tab_dark .svg-close:hover {
+  color: #000000;
+}
+
+.chrome-tab_active .chrome-tab-divider {
+  opacity: 0;
+}
+
+.chrome-tab:hover .chrome-tab-divider {
+  opacity: 0;
+}
+
+.chrome-tab_dark .chrome-tab-divider {
+  background-color: rgba(255, 255, 255, 0.9);
+}

packages/materials/src/libs/page-tab/index.module.css.d.ts

@@ -0,0 +1,15 @@
+declare const styles: {
+  readonly 'button-tab': string;
+  readonly 'button-tab_dark': string;
+  readonly 'button-tab_active': string;
+  readonly 'button-tab_active_dark': string;
+  readonly 'chrome-tab': string;
+  readonly 'chrome-tab_active': string;
+  readonly 'chrome-tab__bg': string;
+  readonly 'chrome-tab_active_dark': string;
+  readonly 'chrome-tab_dark': string;
+  readonly 'chrome-tab-divider': string;
+  readonly 'svg-close': string;
+};
+
+export default styles;

packages/materials/src/libs/page-tab/index.ts

@@ -0,0 +1,3 @@
+import PageTab from './index.vue';
+
+export default PageTab;

packages/materials/src/libs/page-tab/index.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import type { PageTabMode, PageTabProps } from '../../types';
+import { ACTIVE_COLOR, createTabCssVars } from './shared';
+import ChromeTab from './chrome-tab.vue';
+import ButtonTab from './button-tab.vue';
+import SvgClose from './svg-close.vue';
+import style from './index.module.css';
+
+defineOptions({
+  name: 'PageTab'
+});
+
+const props = withDefaults(defineProps<PageTabProps>(), {
+  mode: 'chrome',
+  commonClass: 'transition-all-300',
+  activeColor: ACTIVE_COLOR,
+  closable: true
+});
+
+interface Emits {
+  (e: 'close'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+type SlotFn = (props?: Record<string, unknown>) => any;
+
+type Slots = {
+  /**
+   * Slot
+   *
+   * The center content of the tab
+   */
+  default?: SlotFn;
+  /**
+   * Slot
+   *
+   * The left content of the tab
+   */
+  prefix?: SlotFn;
+  /**
+   * Slot
+   *
+   * The right content of the tab
+   */
+  suffix?: SlotFn;
+};
+
+defineSlots<Slots>();
+
+const activeTabComponent = computed(() => {
+  const { mode, chromeClass, buttonClass } = props;
+
+  const tabComponentMap = {
+    chrome: {
+      component: ChromeTab,
+      class: chromeClass
+    },
+    button: {
+      component: ButtonTab,
+      class: buttonClass
+    }
+  } satisfies Record<PageTabMode, { component: Component; class?: string }>;
+
+  return tabComponentMap[mode];
+});
+
+const cssVars = computed(() => createTabCssVars(props.activeColor));
+
+const bindProps = computed(() => {
+  const { chromeClass: _chromeCls, buttonClass: _btnCls, ...rest } = props;
+
+  return rest;
+});
+
+function handleClose() {
+  emit('close');
+}
+</script>
+
+<template>
+  <component :is="activeTabComponent.component" :class="activeTabComponent.class" :style="cssVars" v-bind="bindProps">
+    <template #prefix>
+      <slot name="prefix"></slot>
+    </template>
+    <slot></slot>
+    <template #suffix>
+      <slot name="suffix">
+        <SvgClose v-if="closable" :class="[style['svg-close']]" @click="handleClose" />
+      </slot>
+    </template>
+  </component>
+</template>
+
+<style scoped></style>

packages/materials/src/libs/page-tab/shared.ts

@@ -0,0 +1,31 @@
+import { addColorAlpha, transformColorWithOpacity } from '@sa/utils';
+import type { PageTabCssVars, PageTabCssVarsProps } from '../../types';
+
+/** The active color of the tab */
+export const ACTIVE_COLOR = '#1890ff';
+
+function createCssVars(props: PageTabCssVarsProps) {
+  const cssVars: PageTabCssVars = {
+    '--soy-primary-color': props.primaryColor,
+    '--soy-primary-color1': props.primaryColor1,
+    '--soy-primary-color2': props.primaryColor2,
+    '--soy-primary-color-opacity1': props.primaryColorOpacity1,
+    '--soy-primary-color-opacity2': props.primaryColorOpacity2,
+    '--soy-primary-color-opacity3': props.primaryColorOpacity3
+  };
+
+  return cssVars;
+}
+
+export function createTabCssVars(primaryColor: string) {
+  const cssProps: PageTabCssVarsProps = {
+    primaryColor,
+    primaryColor1: transformColorWithOpacity(primaryColor, 0.1, '#ffffff'),
+    primaryColor2: transformColorWithOpacity(primaryColor, 0.3, '#000000'),
+    primaryColorOpacity1: addColorAlpha(primaryColor, 0.1),
+    primaryColorOpacity2: addColorAlpha(primaryColor, 0.15),
+    primaryColorOpacity3: addColorAlpha(primaryColor, 0.3)
+  };
+
+  return createCssVars(cssProps);
+}

packages/materials/src/libs/page-tab/svg-close.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'SvgClose'
+});
+
+const emit = defineEmits<Emits>();
+
+interface Emits {
+  (e: 'click'): void;
+}
+
+function handleClick() {
+  emit('click');
+}
+</script>
+
+<template>
+  <div
+    class=":soy: relative h-16px w-16px inline-flex items-center justify-center rd-50% text-14px"
+    @click.stop="handleClick"
+  >
+    <svg width="1em" height="1em" viewBox="0 0 1024 1024">
+      <path
+        fill="currentColor"
+        d="m563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8L295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512L196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1l216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped></style>

packages/materials/src/libs/simple-scrollbar/index.ts

@@ -0,0 +1,3 @@
+import SimpleScrollbar from './index.vue';
+
+export default SimpleScrollbar;

packages/materials/src/libs/simple-scrollbar/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import Simplebar from 'simplebar-vue';
+import 'simplebar-vue/dist/simplebar.min.css';
+
+defineOptions({
+  name: 'SimpleScrollbar'
+});
+</script>
+
+<template>
+  <div class="h-full flex-1-hidden">
+    <Simplebar class="h-full">
+      <slot />
+    </Simplebar>
+  </div>
+</template>
+
+<style scoped></style>

packages/materials/src/types/index.ts

@@ -0,0 +1,294 @@
+/** Header config */
+interface AdminLayoutHeaderConfig {
+  /**
+   * Whether header is visible
+   *
+   * @default true
+   */
+  headerVisible?: boolean;
+  /**
+   * Header class
+   *
+   * @default ''
+   */
+  headerClass?: string;
+  /**
+   * Header height
+   *
+   * @default 56px
+   */
+  headerHeight?: number;
+}
+
+/** Tab config */
+interface AdminLayoutTabConfig {
+  /**
+   * Whether tab is visible
+   *
+   * @default true
+   */
+  tabVisible?: boolean;
+  /**
+   * Tab class
+   *
+   * @default ''
+   */
+  tabClass?: string;
+  /**
+   * Tab height
+   *
+   * @default 48px
+   */
+  tabHeight?: number;
+}
+
+/** Sider config */
+interface AdminLayoutSiderConfig {
+  /**
+   * Whether sider is visible
+   *
+   * @default true
+   */
+  siderVisible?: boolean;
+  /**
+   * Sider class
+   *
+   * @default ''
+   */
+  siderClass?: string;
+  /**
+   * Mobile sider class
+   *
+   * @default ''
+   */
+  mobileSiderClass?: string;
+  /**
+   * Sider collapse status
+   *
+   * @default false
+   */
+  siderCollapse?: boolean;
+  /**
+   * Sider width when collapse is false
+   *
+   * @default '220px'
+   */
+  siderWidth?: number;
+  /**
+   * Sider width when collapse is true
+   *
+   * @default '64px'
+   */
+  siderCollapsedWidth?: number;
+}
+
+/** Content config */
+export interface AdminLayoutContentConfig {
+  /**
+   * Content class
+   *
+   * @default ''
+   */
+  contentClass?: string;
+  /**
+   * Whether content is full the page
+   *
+   * If true, other elements will be hidden by `display: none`
+   */
+  fullContent?: boolean;
+}
+
+/** Footer config */
+export interface AdminLayoutFooterConfig {
+  /**
+   * Whether footer is visible
+   *
+   * @default true
+   */
+  footerVisible?: boolean;
+  /**
+   * Whether footer is fixed
+   *
+   * @default true
+   */
+  fixedFooter?: boolean;
+  /**
+   * Footer class
+   *
+   * @default ''
+   */
+  footerClass?: string;
+  /**
+   * Footer height
+   *
+   * @default 48px
+   */
+  footerHeight?: number;
+  /**
+   * Whether footer is on the right side
+   *
+   * When the layout is vertical, the footer is on the right side
+   */
+  rightFooter?: boolean;
+}
+
+/**
+ * Layout mode
+ *
+ * - Horizontal
+ * - Vertical
+ */
+export type LayoutMode = 'horizontal' | 'vertical';
+
+/**
+ * The scroll mode when content overflow
+ *
+ * - Wrapper: the layout component's wrapper element has a scrollbar
+ * - Content: the layout component's content element has a scrollbar
+ *
+ * @default 'wrapper'
+ */
+export type LayoutScrollMode = 'wrapper' | 'content';
+
+/** Admin layout props */
+export interface AdminLayoutProps
+  extends AdminLayoutHeaderConfig,
+    AdminLayoutTabConfig,
+    AdminLayoutSiderConfig,
+    AdminLayoutContentConfig,
+    AdminLayoutFooterConfig {
+  /**
+   * Layout mode
+   *
+   * - {@link LayoutMode}
+   */
+  mode?: LayoutMode;
+  /** Is mobile layout */
+  isMobile?: boolean;
+  /**
+   * Scroll mode
+   *
+   * - {@link ScrollMode}
+   */
+  scrollMode?: LayoutScrollMode;
+  /**
+   * The id of the scroll element of the layout
+   *
+   * It can be used to get the corresponding Dom and scroll it
+   *
+   * @example
+   *   use the default id by import
+   *   ```ts
+   *   import { adminLayoutScrollElId } from '@sa/vue-materials';
+   *   ```
+   *
+   * @default
+   * ```ts
+   * const adminLayoutScrollElId = '__ADMIN_LAYOUT_SCROLL_EL_ID__'
+   * ```
+   */
+  scrollElId?: string;
+  /** The class of the scroll element */
+  scrollElClass?: string;
+  /** The class of the scroll wrapper element */
+  scrollWrapperClass?: string;
+  /**
+   * The common class of the layout
+   *
+   * Is can be used to configure the transition animation
+   *
+   * @default 'transition-all-300'
+   */
+  commonClass?: string;
+  /**
+   * Whether fix the header and tab
+   *
+   * @default true
+   */
+  fixedTop?: boolean;
+  /**
+   * The max z-index of the layout
+   *
+   * The z-index of Header,Tab,Sider and Footer will not exceed this value
+   */
+  maxZIndex?: number;
+}
+
+type Kebab<S extends string> = S extends Uncapitalize<S> ? S : `-${Uncapitalize<S>}`;
+
+type KebabCase<S extends string> = S extends `${infer Start}${infer End}`
+  ? `${Uncapitalize<Start>}${KebabCase<Kebab<End>>}`
+  : S;
+
+type Prefix = '--soy-';
+
+export type LayoutCssVarsProps = Pick<
+  AdminLayoutProps,
+  'headerHeight' | 'tabHeight' | 'siderWidth' | 'siderCollapsedWidth' | 'footerHeight'
+> & {
+  headerZIndex?: number;
+  tabZIndex?: number;
+  siderZIndex?: number;
+  mobileSiderZIndex?: number;
+  footerZIndex?: number;
+};
+
+export type LayoutCssVars = {
+  [K in keyof LayoutCssVarsProps as `${Prefix}${KebabCase<K>}`]: string | number;
+};
+
+/**
+ * The mode of the tab
+ *
+ * - Button: button style
+ * - Chrome: chrome style
+ *
+ * @default chrome
+ */
+export type PageTabMode = 'button' | 'chrome';
+
+export interface PageTabProps {
+  /** Whether is dark mode */
+  darkMode?: boolean;
+  /**
+   * The mode of the tab
+   *
+   * - {@link TabMode}
+   */
+  mode?: PageTabMode;
+  /**
+   * The common class of the layout
+   *
+   * Is can be used to configure the transition animation
+   *
+   * @default 'transition-all-300'
+   */
+  commonClass?: string;
+  /** The class of the button tab */
+  buttonClass?: string;
+  /** The class of the chrome tab */
+  chromeClass?: string;
+  /** Whether the tab is active */
+  active?: boolean;
+  /** The color of the active tab */
+  activeColor?: string;
+  /**
+   * Whether the tab is closable
+   *
+   * Show the close icon when true
+   */
+  closable?: boolean;
+}
+
+export type PageTabCssVarsProps = {
+  primaryColor: string;
+  primaryColor1: string;
+  primaryColor2: string;
+  primaryColorOpacity1: string;
+  primaryColorOpacity2: string;
+  primaryColorOpacity3: string;
+};
+
+export type PageTabCssVars = {
+  [K in keyof PageTabCssVarsProps as `${Prefix}${KebabCase<K>}`]: string | number;
+};

packages/materials/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

packages/ofetch/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@sa/fetch",
+  "version": "1.0.0-beta.2",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["./src/*"]
+    }
+  },
+  "dependencies": {
+    "ofetch": "1.3.4"
+  }
+}

packages/ofetch/src/index.ts

@@ -0,0 +1,10 @@
+import { ofetch } from 'ofetch';
+import type { FetchOptions } from 'ofetch';
+
+export function createRequest(options: FetchOptions) {
+  const request = ofetch.create(options);
+
+  return request;
+}
+
+export default createRequest;

packages/ofetch/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}