### Install Dependencies and Run Server

Source: https://doc.buildadmin.com/guide/other/contributionCode.html

Install backend dependencies using Composer and start the local development server.

```bash
composer install
php think run
```

--------------------------------

### Example Server Output

Source: https://doc.buildadmin.com/guide/install/senior.html

This is an example of the output shown when the ThinkPHP development server starts with a specified address and port.

```text
ThinkPHP Development server is started On <http://ba.com:80/>
You can exit with `CTRL-C`
Document root is: D:\WWW\ba\public
```

--------------------------------

### Module Install SQL Example

Source: https://doc.buildadmin.com/senior/module/installSql.html

Use this file to write SQL commands for table creation, structure modification, and configuration updates during module installation. Always use `__PREFIX__` for table prefixes and begin table names with the module's unique identifier.

```sql
-- 修改系统配置
UPDATE __PREFIX__config SET value='测试1' WHERE name='site_name';

-- 创建一个数据表
CREATE TABLE IF NOT EXISTS `__PREFIX__module_NewTable` (
    `id`  int(10) UNSIGNED NULL AUTO_INCREMENT COMMENT 'ID' ,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='模块添加的数据表';

-- 假设模块在新版本修改了表结构，可以直接在此文件内写好改变结构的SQL
ALTER TABLE `__PREFIX__module_NewTable` ADD COLUMN `welcome_msg` text COMMENT '欢迎语' AFTER `id`;

```

--------------------------------

### Install BuildAdmin Nuxt Project

Source: https://doc.buildadmin.com/senior/nuxt/intro.html

Follow these steps to clone the WebNuxt project, install dependencies, and start the development server. Ensure the BuildAdmin server is also running.

```bash
cd buildadmin
git clone https://gitee.com/wonderful-code/build-admin-nuxt web-nuxt
cd web-nuxt
pnpm install
# yarn install
pnpm dev -o

# Please note that you also need to start the `BuildAdmin` server
php think run
```

--------------------------------

### Example Output of GD and FreeType Check on Linux

Source: https://doc.buildadmin.com/guide/install/gdFail.html

This is an example of the expected output when GD and FreeType are successfully installed and detected by PHP on a Linux system.

```ini
[root@centos ~]# php -i | grep -E "GD|FreeType"
GD Support => enabled
GD Version => bundled (2.1.0 compatible)
FreeType Support => enabled
FreeType Linkage => with freetype
FreeType Version => 2.9.1
```

--------------------------------

### Restart Services After Extension Installation

Source: https://doc.buildadmin.com/guide/install/missingExtension.html

After installing a new PHP extension, it is essential to restart your web server (Nginx/Apache) or any services running via `php think run`. If you started the service from the terminal, it's recommended to open a new terminal window for the `php -m` check.

```bash
Nginx/Apache/php think run
```

--------------------------------

### Define Custom Code for main.ts Start Function

Source: https://doc.buildadmin.com/senior/module/webBootstrap.html

Use the #main.ts start code start# and #main.ts start code end# markers in webBootstrap.stub to append custom code to the end of the start function in main.ts.

```bash
#main.ts start code start#
    console.log('main.ts start 1')
    console.log('main.ts start 2')
    console.log('main.ts start 3')
#main.ts start code end#
```

--------------------------------

### Example Database Migration Output

Source: https://doc.buildadmin.com/guide/other/update.html

This is an example of the output you might see after successfully running the database migration command.

```ini
PS C:\build-admin> php think migrate:run

 == 20230620180908 Install: migrating
 == 20230620180908 Install: migrated 0.0179s

 == 20230620180916 InstallData: migrating
 == 20230620180916 InstallData: migrated 0.0288s

 == 20230622221507 Version200: migrating
 == 20230622221507 Version200: migrated 0.0561s

All Done. Took 0.1295s
```

--------------------------------

### Restore Installation Files

Source: https://doc.buildadmin.com/guide/other/contributionCode.html

Before committing, ensure that files modified by the installation process are restored. This typically includes .env-example, config/buildadmin.php, and config/database.php. Use 'git restore <filename>' for individual files.

```bash
.env-example
config/buildadmin.php
config/database.php
# 可能会有其他文件，请保证提交的文件仅新增功能或修复Bug产生的文件变更即可

# 还原单个文件的命令
git restore <文件名>
```

--------------------------------

### Install yarn

Source: https://doc.buildadmin.com/guide/install/preparePM.html

Installs the yarn package manager globally. Choose yarn if it's your preferred package manager.

```bash
# Install yarn
npm install -g yarn

# Verify yarn installation
yarn -v
```

--------------------------------

### Install Composer on Linux/macOS

Source: https://doc.buildadmin.com/guide/install/prepareComposer.html

Run this command in your terminal to download and install Composer globally on Linux or macOS systems. Ensure you have PHP installed.

```bash
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
```

--------------------------------

### Install ni

Source: https://doc.buildadmin.com/guide/install/preparePM.html

Installs the ni package manager globally. ni is a universal npm package manager wrapper.

```bash
# Install ni
npm install -g @antfu/ni

# Verify ni installation
ni -v
```

--------------------------------

### Check Installed PHP Extensions

Source: https://doc.buildadmin.com/guide/install/missingExtension.html

Use this command to verify which PHP extensions are currently installed on your system. This helps in identifying missing extensions before proceeding with installation.

```bash
php -m
```

--------------------------------

### Define Custom Code for web-nuxt/app.vue Bottom Insertion

Source: https://doc.buildadmin.com/senior/module/webBootstrap.html

Use the #web-nuxt/app.vue start code start# and #web-nuxt/app.vue start code end# markers in webBootstrap.stub to append custom code to the bottom of web-nuxt/app.vue.

```bash
#web-nuxt/app.vue start code start#
console.log('web-nuxt/app.vue start 1')
console.log('web-nuxt/app.vue start 2')
console.log('web-nuxt/app.vue start 3')
#web-nuxt/app.vue start code end#
```

--------------------------------

### Check Node.js Version

Source: https://doc.buildadmin.com/guide/install/prepareNodeJs.html

Verify that Node.js is installed by checking its version in the command line. If no version is displayed, check your system's environment variables.

```bash
node -v
```

--------------------------------

### Check FreeType Installation on Windows

Source: https://doc.buildadmin.com/guide/install/gdFail.html

Run this command in an administrator command prompt or PowerShell on Windows to check for FreeType support in PHP. No output means it's likely not installed.

```powershell
php -i | findstr "FreeType"
```

--------------------------------

### Example Output of FreeType Check on Windows

Source: https://doc.buildadmin.com/guide/install/gdFail.html

This demonstrates the typical output when FreeType support is enabled and detected by PHP on a Windows system.

```powershell
PS C:\WINDOWS\system32> php -i | findstr "FreeType"
FreeType Support => enabled
FreeType Linkage => with freetype
FreeType Version => 2.9.1
```

--------------------------------

### Check GD and FreeType Installation on Linux

Source: https://doc.buildadmin.com/guide/install/gdFail.html

Execute this command on Linux to verify if GD and FreeType support are enabled in your PHP installation. Absence of output suggests they are not installed.

```bash
php -i | grep -E "GD|FreeType"
```

--------------------------------

### Module Directory Structure

Source: https://doc.buildadmin.com/senior/module/directoryStructure.html

Modules can include these directories, which will be directly copied to the BuildAdmin project root during installation.

```bash
app
config
extend
public
vendor
web
web-nuxt
```

--------------------------------

### Install pnpm

Source: https://doc.buildadmin.com/guide/install/preparePM.html

Installs the pnpm package manager globally. pnpm is an alternative package manager to npm and yarn.

```bash
# Install pnpm
npm install -g pnpm

# Verify pnpm installation
pnpm -v
```

--------------------------------

### Configure Common Search with Various Input Types

Source: https://doc.buildadmin.com/senior/web/baTable.html

Example of initializing baTable with diverse column configurations for common search, including disabling search, using fuzzy matching, image rendering, dropdowns, date/time range pickers, and remote select.

```typescript
import baTableClass from '/@/utils/baTable'
import { baTableApi } from '/@/api/common'

const baTable = new baTableClass(new baTableApi('table controller url'), {
    // 定义表格列数据、同时定义公共搜索数据
    column: [
        // 关闭这个字段的公共搜索
        { type: 'selection', align: 'center', operator: false },
        // 此字段是模糊查找，并为公共搜索输入框设置了 placeholder
        { label: 'ID', prop: 'id', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query'), width: 70 },
        // 此字段是图片，建议关闭公共搜索
        { label: '头像', prop: 'avatar', align: 'center', render: 'image', operator: false },
        // 此字段将生成一个下拉框选择进行搜索，拥有三个值
        {
            label: t('user.user.Gender'),
            prop: 'gender',
            align: 'center',
            render: 'tag',
            replaceValue: { '0': t('unknown'), '1': t('user.user.male'), '2': t('user.user.female') },
        },
        // 此字段将生成一个时间范围选择框，选择时间日期进行搜索
        { label: t('createtime'), prop: 'createtime', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
        // 此字段将生成一个日期范围选择框，选择日期进行搜索（请注意渲染还是 datetime 若需自定义单元格渲染请参考`表格列`一节）
        { label: t('updatetime'), prop: 'updatetime', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160, comSearchRender: 'date' },
        // 另外一种在公共搜索渲染下拉框的办法
        {
            label: t('user.user.Gender'),
            prop: 'gender',
            align: 'center',
            comSearchRender: 'select',
            replaceValue: { '0': t('unknown'), '1': t('user.user.male'), '2': t('user.user.female') },
        },
        // 远程下拉选择框
        { label: '会员', prop: 'user_id', comSearchRender: 'remoteSelect', remote: {
            // 主键，下拉 value
            pk: 'id',
            // 字段，下拉 label
            field: 'username',
            // 远程接口URL
            // 比如想要获取 user(会员) 表的数据，后台`会员管理`控制器URL为`/index.php/admin/user.user/index`
            // 该URL地址通常等于对应后台管理功能的`查看`操作请求的URL
            remoteUrl: '/admin/user.user/index',
            // 额外的请求参数
            params: {},
        }},
    ]
})
```

--------------------------------

### Specify Service Port for Installation

Source: https://doc.buildadmin.com/guide/install/senior.html

Use this command to run the ThinkPHP development server on a specific port. Ensure the port is not already in use.

```bash
php think run -p 80
```

```bash
php think run -p 1888
```

--------------------------------

### Install 'n' Module for Node.js Version Management

Source: https://doc.buildadmin.com/guide/install/prepareNodeJs.html

Install the 'n' module globally, which is used for managing Node.js versions on your system. The --force flag may be necessary in some environments.

```bash
npm install -g n --force
```

--------------------------------

### Install cnpm

Source: https://doc.buildadmin.com/guide/install/preparePM.html

Installs the cnpm package manager globally. Use this command if you prefer cnpm for managing npm packages.

```bash
# Install cnpm
npm install cnpm -g --registry=https://registry.npmmirror.com

# Verify cnpm installation
cnpm -v
```

--------------------------------

### Initialize BaTable with API and Columns

Source: https://doc.buildadmin.com/senior/web/baTable.html

Instantiate the baTableClass with an API endpoint and define table columns, including custom renderers and operators. This setup is typically done in the script section of a Vue component.

```typescript
import Table from '/@/components/table/index.vue' // 导入 Table 组件
import baTableClass from '/@/utils/baTable' // 导入 baTable 类
import { baTableApi } from '/@/api/common' // 导入表格 api 方法生成器类
import { defaultOptButtons } from '/@/components/table' // 导入默认表格操作按钮数据:拖拽排序、编辑、删除按钮等

const tableRef = ref()

// 直接实例化 baTableClass 并传递各种参数
const baTable = new baTableClass(
    new baTableApi('/admin/user.user/'), // 一个 api 类的实例，快速生成一个控制器的 增、删、改、查、排序 接口的请求方法
    {
        // 表格列定义
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: 'ID', prop: 'id', align: 'center', operator: 'LIKE', operatorPlaceholder: '模糊查询', width: 70 },
            { label: '用户名', prop: 'username', align: 'center', operator: 'LIKE', operatorPlaceholder: '模糊查询' },
            // ...
            {
                label: '操作',
                align: 'center',
                width: '100',
                render: 'buttons',
                // 操作按钮传递的只是一个按钮配置数组，你也可以在渲染前对数组配置进行修改
                buttons: defaultOptButtons(['edit', 'delete']),
                operator: false,
            },
        ],
        // 不允许双击编辑的列的 prop
        dblClickNotEditColumn: [undefined],
        // ...属性很多，请参考本文下方的表格全部可用属性，或翻阅源代码（有注释）
    },
)

// 实例化表格后，将 baTable 的实例提供给上下文
provide('baTable', baTable)

// 相当于表格的 onMounted，也可以在页面的 onMounted 时执行
baTable.mount()

// 获取数据，可以在页面的 onMounted 时执行，也可以比如先请求一个API，再执行获取数据
baTable.getData()!.then(() => {
    // 查看请求完毕（已获取到表格数据）
    baTable.initSort() // 初始化默认排序（如果需要）
    baTable.dragSort() // 初始化拖拽排序（如果需要）
})

```

--------------------------------

### Define Custom Code for main.ts Imports

Source: https://doc.buildadmin.com/senior/module/webBootstrap.html

Use the #main.ts import code start# and #main.ts import code end# markers in webBootstrap.stub to insert custom import statements into main.ts.

```bash
#main.ts import code start#
console.log('main.ts import 1')
console.log('main.ts import 2')
#main.ts import code end#
```

--------------------------------

### Define Custom Code for web-nuxt/app.vue Imports

Source: https://doc.buildadmin.com/senior/module/webBootstrap.html

Use the #web-nuxt/app.vue import code start# and #web-nuxt/app.vue import code end# markers in webBootstrap.stub to insert custom import statements into web-nuxt/app.vue.

```bash
#web-nuxt/app.vue import code start#
console.log('web-nuxt/app.vue import 1')
console.log('web-nuxt/app.vue import 2')
#web-nuxt/app.vue import code end#
```

--------------------------------

### Define Custom Code for App.vue Imports

Source: https://doc.buildadmin.com/senior/module/webBootstrap.html

Use the #App.vue import code start# and #App.vue import code end# markers in webBootstrap.stub to insert custom import statements into App.vue.

```bash
#App.vue import code start#
console.log('App.vue import 1')
console.log('App.vue import 2')
#App.vue import code end#
```

--------------------------------

### IIS URL Rewrite Configuration (web.config)

Source: https://doc.buildadmin.com/senior/faq.html

Configure IIS URL rewriting for BuildAdmin by creating a `web.config` file in the public directory. This requires the URL Rewrite module to be installed.

```xml
<!-- 1. 安装 url-rewrite：https://www.iis.net/downloads/microsoft/url-rewrite -->
<!-- 2. 站点根目录（public目录）建立 `web.Config` 文件，复制以下内容： -->

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="BuildAdmin" stopProcessing="true">
                    <match url="^(.*)$" ignoreCase="false" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="index.php/{R:1}" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
        <defaultDocument>
            <files>
                <clear />
                <add value="index.html" />
                <add value="index.php" />
                <add value="Default.htm" />
                <add value="index.htm" />
                <add value="iisstart.htm" />
            </files>
        </defaultDocument>
    </system.webServer>
</configuration>
```

--------------------------------

### File Renaming Operations (INI)

Source: https://doc.buildadmin.com/guide/other/incompatibleUpdate/v112.html

Shows examples of file renaming operations using a configuration format, likely for build or deployment scripts. These renames consolidate mixins into a central 'mixins' directory for better management.

```ini
rename web/src/components/{baInput/components => mixins}/baUpload.ts
rename web/src/{layouts/common => components}/mixins/loginFooter.vue
rename web/src/{layouts/common => components}/mixins/loginMounted.ts
rename web/src/{layouts/common => components}/mixins/userMounted.ts
rename web/src/{layouts/common => components}/mixins/userProfile.vue
```

--------------------------------

### Complete Update Demonstration: Pulling Code

Source: https://doc.buildadmin.com/guide/other/update.html

This section demonstrates the first step of a complete update process, focusing on stashing local changes, checking remote repository settings, and pulling the latest code.

```bash
# 保存工作现场
git stash
Saved working directory and index state WIP on v2: ******** # 命令输出：保存工作区成功

# 检查远程仓库设置
git remote -v
buildadmin      https://gitee.com/wonderful-code/buildadmin.git (fetch)
buildadmin      https://gitee.com/wonderful-code/buildadmin.git (push)
# PS：笔者这里 BuildAdmin 远程仓库的名称是 buildadmin，你仓库的可能不一样，或者干脆没有地址为 `https://gitee.com/wonderful-code/buildadmin.git` 的远程仓库设置
# 如果没有该仓库地址，请执行命令添加：git remote add buildadmin https://gitee.com/wonderful-code/buildadmin.git

# 拉取最新代码，buildadmin 为远程仓库名称
git pull buildadmin v2
remote: Enumerating objects: 833, done.
remote: Counting objects: 100% (336/336), done.
remote: Compressing objects: 100% (151/151), done.
remote: Total 833 (delta 243), reused 183 (delta 183), pack-reused 497
Receiving objects: 100% (833/833), 265.19 KiB | 385.00 KiB/s, done.
Resolving deltas: 100% (434/434), completed with 72 local objects.
From https://gitee.com/wonderful-code/buildadmin
 * branch            v2     -> FETCH_HEAD
 * [new branch]      v2     -> buildadmin/v2
Auto-merging app/admin/controller/Index.php # 更新已自动合并
Auto-merging app/api/common.php
Auto-merging app/api/controller/Account.php
Auto-merging app/api/controller/User.php
Auto-merging app/api/lang/zh-cn.php
CONFLICT (content): Merge conflict in app/api/lang/zh-cn.php # 冲突！仓库改了这个文件，你本地也改了这个文件，需要手动解决冲突
Auto-merging app/common/library/Auth.php
Auto-merging config/buildadmin.php
Auto-merging extend/ba/module/Manage.php
Auto-merging web/src/api/controllerUrls.ts
Auto-merging web/src/api/frontend/user/index.ts
Auto-merging web/src/utils/axios.ts
CONFLICT (content): Merge conflict in web/src/utils/axios.ts # 冲突！
Auto-merging web/src/views/frontend/user/account/overview.vue
CONFLICT (content): Merge conflict in web/src/views/frontend/user/account/overview.vue # 冲突！
Automatic merge failed; fix conflicts and then commit the result. # 提示你需要手动解决冲突，然后commit
```

--------------------------------

### Specify Service Address and Port

Source: https://doc.buildadmin.com/guide/install/senior.html

Configure the development server to run on a specific domain or IP address and port.

```bash
php think run -H ba.com -p 80
```

--------------------------------

### Configure Composer with Alibaba Cloud Mirror (Deprecated)

Source: https://doc.buildadmin.com/guide/install/prepareComposer.html

This command attempts to set Composer to use the Alibaba Cloud mirror. This mirror has stopped updating and is not recommended for use.

```bash
composer config -g repos.packagist composer https://mirrors.aliyun.com/composer/
```

--------------------------------

### Set Directory Permissions for BuildAdmin

Source: https://doc.buildadmin.com/senior/deployment.html

Configure directory ownership and permissions for optimal security and functionality. Ensure the web server user has appropriate access.

```bash
# Modify directory owner to www user
sudo chown www:www /www/wwwroot/example.com -R

# Set permissions for the entire site root directory to 555
sudo chmod 555 /www/wwwroot/example.com -R

# Grant write permissions to the owner for the following two directories
sudo chmod u+w /www/wwwroot/example.com/runtime -R
sudo chmod u+w /www/wwwroot/example.com/public/storage -R
```

--------------------------------

### Configure Composer with Shanghai Jiao Tong University Mirror

Source: https://doc.buildadmin.com/guide/install/prepareComposer.html

Set Composer to use the mirror provided by Shanghai Jiao Tong University. This can provide faster download speeds for packages.

```bash
composer config -g repos.packagist composer https://packagist.mirrors.sjtug.sjtu.edu.cn
```

--------------------------------

### Upgrade npm

Source: https://doc.buildadmin.com/guide/install/prepareNodeJs.html

Update npm to the latest version, as the version bundled with Node.js installations is often outdated.

```bash
npm install -g npm
```

--------------------------------

### Initialize baTable with Common Search Configuration

Source: https://doc.buildadmin.com/senior/web/baTable.html

Instantiate baTable with column definitions that include common search rendering (`comSearchRender`), value replacement (`replaceValue`), and operator types.

```typescript
const baTable = new baTableClass(apiClassInstance, {
    column: [
        {
            label: '性别',
            prop: 'gender',
            align: 'center',
            // 公共搜索渲染为 select
            comSearchRender: 'select',
            // 定义 select 的选项列表（同时也是单元格的值替换列表）
            replaceValue: { '0': '未知', '1': '女', '2': '男' },
            // 公共搜索操作符号
            operator: '=',
            // 单元格渲染为 tag
            render: 'tag',
        },
    ]
})
```

--------------------------------

### Upgrade Node.js to Latest Stable Version

Source: https://doc.buildadmin.com/guide/install/prepareNodeJs.html

Use the 'n' module to upgrade your Node.js installation to the most recent stable release.

```bash
n stable
```

--------------------------------

### Web 端 (Frontend) Directory Structure

Source: https://doc.buildadmin.com/senior/directoryStructure.html

This classic directory structure for the web端 is optimized for development. It includes sections for public files, source code (API, assets, components, lang, layouts, router, stores, styles, utils, views), and type definitions.

```bash
web 端
使用经典目录结构设计，并合理优化
├─public（公共文件）
├─src
│  │  App.vue
│  │  main.ts
│  │
│  ├─api（所有接口相关）
│  │  │  common.ts（公共 Url 定义和公共请求方法）
│  │  │
│  │  ├─backend（后台接口方法定义）
│  │  │
│  │  └─frontend（前台接口方法定义）
│  │
│  ├─assets（静态资源）
│  │
│  ├─components（组件）
│  │  ├─baInput（输入组件封装：常用+图片/文件上传、数组、城市/图标选择、富文本等封装在了一个组件内）
│  │  │
│  │  ├─contextmenu（tabs 右击菜单）
│  │  │
│  │  ├─formItem（表单项，结合 baInput）
│  │  │
│  │  ├─icon（字体图标组件，支持加载本地 svg、阿里、element、awesome）
│  │  │
│  │  ├─table（表格封装）
│  │  │
│  │  ├─mixins（可供模块混入代码到系统的埋点，如云存储，编辑器）
│  │  │
│  │  ├─clickCaptcha 点选文字验证码
│  │  │
│  │  └─terminal（终端）
│  │
│  ├─lang（所有语言包）
│  │  │  autoload.ts（语言包按需加载映射表，比如路由 /user/user 需要同时加载 /user/group 的语言包可在此定义）
│  │  │  globs-en.ts（全局英文语言包）
│  │  │  globs-zh-cn.ts（全局中文语言包）
│  │  ├─common（公共页面语言包：`t('dirName.pageName.翻译名')`进行调用）
│  │  ├─backend（后台页面语言包：`t('dirName.pageName.翻译名')`进行调用）
│  │  │  zh-cn.ts（后台公共中文语言包）
│  │  │  en.ts（后台公共英文语言包）
│  │  ├─frontend（前台页面语言包：`t('dirName.pageName.翻译名')`进行调用）
│  │  │  zh-cn.ts（前台公共中文语言包）
│  │  └─ en.ts（前台公共英文语言包）
│  │
│  ├─layouts（布局）
│  │  ├─backend（后台布局）
│  │  │  components （布局组件）
│  │  │  container （布局容器组件，内含默认的四种布局方案）
│  │  │  index.vue （后台布局入口）
│  │  ├─frontend（前台布局）
│  │  │  components （布局组件）
│  │  │  container （布局容器组件，内含默认的布局方案）
│  │  │  user.vue （会员中心布局入口）
│  │  └─common（公共布局组件）
│  │
│  ├─router（路由）
│  │      static.ts（静态路由配置）
│  │
│  ├─stores（状态商店）
│  │  ├─adminInfo.ts（管理员资料）
│  │  ├─config.ts（布局相关）
│  │  ├─memberCenter.ts（会员中心）
│  │  ├─navTabs.ts（后台顶栏 tab）
│  │  ├─siteConfig.ts（站点配置）
│  │  ├─terminal.ts（终端）
│  │  ├─userInfo.ts（用户资料）
│  │  ├─refs.ts（全局提供：引用（指向）一些对象（组件）的句柄）
│  │  │
│  │  ├─constant（常量定义）
│  │  │      cacheKey.ts（缓存 Key）
│  │  │
│  │  └─interface（接口定义）
│  │          index.ts
│  │
│  ├─styles（样式表）
│  │      app.scss
│  │      index.scss（css 入口文件，main.ts 只导入它就可以了）
│  │      element.scss（element 的 css 覆盖）
│  │      loading.scss
│  │      var.scss（css 变量定义）
│  │      dark.scss（暗黑模式下 css 变量定义）
│  │      mixins.scss（scss mixins 与 function 定义）
│  │
│  ├─utils（工具库）
│  │      axios.ts（网络请求封装）
│  │      baTable.ts（表格封装）
│  │      build.ts（构建时）
│  │      common.ts（公共方法）
│  │      directives.ts（指令）
│  │      horizontalScroll.ts（横向滚动工具）
│  │      iconfont.ts（图标）
│  │      layout.ts（布局辅助）
│  │      loading.ts（页面加载）
│  │      pageBubble.ts（页面气泡效果）
│  │      pageShade.ts（全局阴影）
│  │      random.ts（随机数、字符串生成）
│  │      router.ts（路由辅助）
│  │      storage.ts（local 缓存、session 缓存封装）
│  │      useCurrentInstance.ts（快速获取当前实例）
│  |      useDark.ts （暗黑模式相关工具函数）
│  │      validate.ts（一些表单验证方法）
│  │      vite.ts（vite运行与编译时）
│  │
│  └─views（视图）
│      ├─backend（后台视图）
│      ├─common（公共视图）
│      └─frontend（前台视图）
│
├─types
│  .editorconfig（IDE 风格统一配置）
│  .env（基础环境变量定义）
│  .env.development（开发环境变量定义）
│  .env.production（生产环境变量定义）
│  .prettierrc.js（prettier 配置）
│  eslint.config.js（eslint 配置）
│  index.html（入口文件）
│  package.json
│  README.md
│  tsconfig.json（ts 配置）
└─ vite.config.ts（vite 配置）
```

--------------------------------

### Upgrade Node.js to a Specific Version

Source: https://doc.buildadmin.com/guide/install/prepareNodeJs.html

Use the 'n' module to upgrade or downgrade your Node.js installation to a specific version. Replace 'v22.13.0' with your desired version number.

```bash
n v22.13.0
```

--------------------------------

### View Current Composer Repository Configuration

Source: https://doc.buildadmin.com/guide/install/prepareComposer.html

This command displays the global configuration of your Composer repositories, allowing you to see the currently active mirror source.

```bash
composer config -g -l
```

--------------------------------

### Clone and Fork BuildAdmin Repository

Source: https://doc.buildadmin.com/guide/other/contributionCode.html

Clone the forked repository to your local machine and navigate into the buildadmin directory.

```bash
git clone https://gitee.com/<yourname>/buildadmin.git
cd buildadmin
```

--------------------------------

### Using the Icon Component with Different Icon Types

Source: https://doc.buildadmin.com/senior/web/icon.html

Demonstrates how to use the global Icon component with Font Awesome, Element Plus, local SVG, and Aliiconfont. Ensure correct prefixes and naming conventions for each type.

```vue
<Icon name="fa fa-pencil" />

<Icon name="el-icon-Close" color="#8595F4" size="20" />

<Icon name="local-logo" />

<Icon name="iconfont icon-user" size="20" />
```

--------------------------------

### Configure Composer with Tencent Cloud Mirror

Source: https://doc.buildadmin.com/guide/install/prepareComposer.html

Configure Composer to use the Tencent Cloud mirror. Note that this mirror may require authorization information and might be closed.

```bash
composer config -g repos.packagist composer https://mirrors.cloud.tencent.com/composer/
```

--------------------------------

### Global and On-Demand Language Package Usage (TypeScript)

Source: https://doc.buildadmin.com/guide/other/incompatibleUpdate/v112.html

Demonstrates how to use global, backend, and on-demand loaded language packages in TypeScript. Ensure the required translation keys are loaded before use to prevent runtime warnings.

```typescript
// Global language package available (/@/lang/globs-zh-cn.ts)
t( "state" ) 

// Backend common language package available (/@/lang/backend/zh-cn.ts)
t( "layouts.default" ) 

// On-demand loaded language package available (/@/lang/backend/zh-cn/user/user.ts)
t( "user.user.nickname" ) 

// Other language packages are not available
t( "user.group.jurisdiction" )
```

--------------------------------

### Auto-Get Table Filter Conditions via URL

Source: https://doc.buildadmin.com/senior/web/baTable.html

Automatically apply filters to a table by passing parameters in the URL. The `user_id` parameter in this example is automatically detected and used for filtering the 'balance log' table.

```typescript
import router from '/@/router/index'

// Jump to the user/moneyLog page, carrying the user_id parameter
router.push({
    name: 'user/moneyLog',
    query: {
        // The user_id field exists in the public search of the user/moneyLog page table
        // The table public search within the user/moneyLog page will automatically obtain the following parameters, and if they exist, will automatically fill and search
        user_id: baTable.form.items!.id,
    },
})
```

--------------------------------

### Define Custom Code for App.vue onMounted Hook

Source: https://doc.buildadmin.com/senior/module/webBootstrap.html

Use the #App.vue onMounted code start# and #App.vue onMounted code end# markers in webBootstrap.stub to append custom code to the end of the onMounted function in App.vue.

```bash
#App.vue onMounted code start#
    console.log('App.vue onMounted1')
    console.log('App.vue onMounted2')
    console.log('App.vue onMounted3')
#App.vue onMounted code end#
```

--------------------------------

### Preprocess Edit Data Using Post-operation Hook

Source: https://doc.buildadmin.com/senior/web/baTable.html

Utilize the `baTable.after.getEditData` hook to preprocess data before it's used in the edit form. This example shows how to clear the title and set a default icon if none exists.

```typescript
/**
 * 利用钩子在修改数据前对数据进行预处理
 * getEditData 为获取到编辑行数据后钩子（老版本此钩子名为 requestEdit）
 * @param object.res 为请求被编辑数据时，接口的完整响应数据
 */
baTable.after.getEditData = ({ res }) => {
    if (res.code == 1 && baTable.form.items) {
        // 将被编辑行的标题置空
        baTable.form.items.title = ''

        // 如果被编辑行没有图标，给定一个默认图标
        if (!baTable.form.items.icon) {
            baTable.form.items.icon = 'fa fa-circle-o'
        }
    }
}
```

--------------------------------

### Using BaInput as an Icon Selector

Source: https://doc.buildadmin.com/senior/web/icon.html

Shows how to integrate the Icon Picker functionality within a BaInput component. Supports various configurations like size, disabled state, placement, and displaying the icon name.

```vue
<template>
    <BaInput type="icon" v-model="state.icon" />

    <!-- 使用大号的输入框 -->
    <BaInput type="icon" v-model="state.icon" :attr="{ size: 'large' }" />

    <!-- 禁用状态的图标选择器 -->
    <BaInput type="icon" v-model="state.icon" :attr="{ disabled: true }" />

    <!-- 图标选择器面板出现在上方，同时显示选择的图标名称 -->
    <BaInput type="icon" v-model="state.icon" :attr="{ placement: 'top', 'show-icon-name': true }" />
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import BaInput from '/@/components/baInput/index.vue'

const state = reactive({
    // Icon默认值
    icon: 'fa fa-drivers-license',
})
</script>
```