### Installation Wizard JavaScript Logic

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/Install.html

Client-side logic for managing installation steps, form submission, and server communication using jQuery.

```javascript
$(document).ready(function () { let currentStep = 0; const steps = $('.step-container'); const $databaseError = $('.database-error'); const $databaseMessage = $('.database-message'); $("#cli-cpu").hover(function () { layer.tips(`请根据服务器的 CPU 数量调整相应设置。如果服务器上只部署一个程序，请填写 'auto'，该选项将自动获取服务器的 CPU 数量并最大化其性能。如果部署多个程序，请根据需要填写具体数量，最低为 1。`, '#cli-cpu', { tips: [1, '#000000'], time: 0 }); }, function () { layer.closeAll('tips'); }); function showStep(step) { steps.removeClass('active').removeClass('smooth-transition'); steps.eq(step).addClass('active').addClass('smooth-transition'); } $('.next-btn').on('click', function () { if (currentStep == 1) { $databaseError.hide(); const formData = util.arrayToObject($('.database-form').serializeArray()); util.post({ url: "/install/database", data: formData, done: () => { currentStep++; showStep(currentStep); }, error: res => { if (res.code == 13) { $databaseMessage.html(res.msg); $databaseError.show(); } else { layer.msg(res.msg); } }, fail: res => { layer.msg("服务器数据错误"); } }); return; } else if (currentStep == 2) { const formData = util.arrayToObject($('.server-form').serializeArray()); util.post({ url: "/install/server", data: formData, done: () => { currentStep++; showStep(currentStep); }, error: res => { layer.msg(res.msg); }, fail: res => { layer.msg("服务器数据错误"); } }); return; } if (currentStep < steps.length - 1) { currentStep++; showStep(currentStep); } }); $('.prev-btn').on('click', function () { if (currentStep > 0) { currentStep--; showStep(currentStep); } }); $('.finish-btn').on('click', function () { const dbForm = util.arrayToObject($('.database-form').serializeArray()); const userFrom = util.arrayToObject($('.user-form').serializeArray()); const serverFrom = util.arrayToObject($('.server-form').serializeArray()); util.post({ url: "/install/finish", data: Object.assign({}, userFrom, dbForm, serverFrom), done: res => { currentStep++; showStep(currentStep); $('.http-proxy').text("http://127.0.0.1:" + serverFrom.cli_port); $('.user-email').text(userFrom.login_email); }, error: res => { layer.msg(res.msg); }, fail: res => { layer.msg("服务器数据错误"); } }); }); });
```

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

### Install Aliyun SMS Package

Source: https://github.com/lizhipay/mcy-shop/blob/main/vendor/mrgoon/aliyun-sms/README.md

Install the package via Composer.

```bash
composer require mrgoon/aliyun-sms
```

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

### Installation Wizard CSS Styles

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/Install.html

CSS styles for the installation wizard, including layout, card styling, and step transition animations.

```css
body { background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } .card { border: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 0; background-color: #ffffffa8; } .list-group { --bs-list-group-bg: #ffffff05; } .card-header { background-color: #007bff73; color: white; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .form-control { background-color: #ffffff30; } .step-container { display: none; } .step-container.active { display: block; } .step-btn { display: flex; justify-content: space-between; } .smooth-transition { transition: all 0.5s ease-in-out; opacity: 0; } .smooth-transition.active { opacity: 1; } .list-group-item { border: 1px solid #d1d1d175; color: #476ced !important; }
```

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

### Set Environment Variables

Source: https://github.com/lizhipay/mcy-shop/blob/main/vendor/mrgoon/aliyun-sms/README.md

Define Aliyun credentials in the .env file after publishing the configuration.

```text
ALIYUN_SMS_AK=your access key
ALIYUN_SMS_AS=your secret key
ALIYUN_SMS_SIGN_NAME=sign name
```

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

### Configure Laravel Service Provider

Source: https://github.com/lizhipay/mcy-shop/blob/main/vendor/mrgoon/aliyun-sms/README.md

Register the service provider in config/app.php and publish the configuration file.

```php
Mrgoon\AliSms\ServiceProvider::class
```

```bash
php artisan vendor:publish
```

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

### Admin Login Form Handling

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/Admin/Auth/Login.html

Handles the login form submission. It serializes form data, attaches a client token, and sends a POST request to the admin endpoint. Upon successful authentication, it stores the token and redirects the user. Supports Enter key submission.

```javascript
window.onload = function () { $(".button-login").click(function () { let data = util.arrayToObject($("#login-form").serializeArray()); data.token = util.getClientToken(); util.post("/admin", data, res => { localStorage.setItem("manage_token", data.token); window.location.href = util.getParam("goto") !== null ? decodeURIComponent(util.getParam("goto")) : "/admin/dashboard"; }); }); $(document).keydown(function (event) { if (event.key === 'Enter') { $(".button-login").click(); } }); }
```

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

### Attr.IDBlacklist Configuration

Source: https://github.com/lizhipay/mcy-shop/blob/main/vendor/ezyang/htmlpurifier/library/HTMLPurifier/ConfigSchema/schema/Attr.IDBlacklist.txt

Details the configuration for the IDBlacklist attribute.

```APIDOC
## Attr.IDBlacklist

### Description
Array of IDs not allowed in the document.

### Type
list

### Default Value
array()

```

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

### Send SMS in Non-Laravel Projects

Source: https://github.com/lizhipay/mcy-shop/blob/main/vendor/mrgoon/aliyun-sms/README.md

Manually pass the configuration array to the AliSms instance for standalone usage.

```php
$config = [
        'access_key' => 'your access key',
        'access_secret' => 'your access secret',
        'sign_name' => 'your sign name',
    ];

    $aliSms = new Mrgoon\AliSms\AliSms();
    $response = $sms->sendSms('phone number', 'tempplate code', ['name'=> 'value in your template'], $config);
```

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

### JavaScript for Agreement Acceptance Logic

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/LegalTerms.html

Handles user agreement acceptance by tracking scroll progress and checkbox selection. It enables the 'Continue' button only after the user has scrolled through the agreement and checked the box.

```javascript
let hasScrolled = false;
let hasChecked = false;
// 滚动进度条
const content = document.getElementById('content');
const progressBar = document.getElementById('progressBar');
content.addEventListener('scroll', function () {
    const scrollTop = content.scrollTop;
    const scrollHeight = content.scrollHeight - content.clientHeight;
    const progress = (scrollTop / scrollHeight) * 100;
    progressBar.style.width = progress + '%';
    if (progress >= 95) {
        hasScrolled = true;
        updateButtonState();
    }
});
document.getElementById('agreeCheckbox').addEventListener('change', function (e) {
    if (this.checked && !hasScrolled) {
        layer.msg('请先阅读全部协议内容');
        this.checked = false;
        return;
    }
    hasChecked = this.checked;
    updateButtonState();
});
function updateButtonState() {
    const agreeBtn = document.getElementById('agreeBtn');
    if (hasScrolled && hasChecked) {
        agreeBtn.disabled = false;
    } else {
        agreeBtn.disabled = true;
    }
}
function agreeTerms() {
    if (!hasScrolled) {
        layer.msg('请完整阅读用户协议');
        return;
    }
    if (!hasChecked) {
        layer.msg('请勾选同意协议选项');
        return;
    }
    $.get("/admin/dashboard?agree=1", res => {
        if (res.code === 200) {
            window.location.reload();
        }
    });
}
```

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

### UploadedFileInterface Methods

Source: https://github.com/lizhipay/mcy-shop/blob/main/vendor/psr/http-message/docs/PSR7-Interfaces.md

This section outlines the core methods provided by the UploadedFileInterface for handling file uploads.

```APIDOC
## UploadedFileInterface Methods

### Description
Provides an interface for handling uploaded files in HTTP requests.

### Methods

#### `getStream()`

- **Description**: Retrieve a stream representing the uploaded file.
- **Return Type**: `Psr\Http\Message\StreamInterface`

#### `moveTo($targetPath)`

- **Description**: Move the uploaded file to a new location.
- **Parameters**:
  - **$targetPath** (string) - Required - The destination path for the uploaded file.
- **Return Type**: `void`

#### `getSize()`

- **Description**: Retrieve the file size in bytes.
- **Return Type**: `int|null`

#### `getError()`

- **Description**: Retrieve the error associated with the uploaded file, if any.
- **Return Type**: `int` (Should be one of PHP's `UPLOAD_ERR_*` constants)

#### `getClientFilename()`

- **Description**: Retrieve the filename sent by the client.
- **Return Type**: `string|null`

#### `getClientMediaType()`

- **Description**: Retrieve the media type (MIME type) sent by the client.
- **Return Type**: `string|null`
```

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

### Display Dynamic Content with Templating

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/302.html

Use double curly braces to display dynamic message content within the HTML. This is a common pattern in many templating engines.

```html
{{ message }}
```

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

### Render fatal error details in template

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/Runtime.html

Displays error metadata and stack trace using Twig template syntax.

```twig
致命的な誤り CODE:{{ error.getCode() }}
=================================

{{ error.getFile() }}:{{ error.getLine() }}

{{ error.getMessage() }}

Trace:  
{{ error.getTraceAsString()|replace({ '\\n' : '  
' })|raw }}
```

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

### Link to External URL

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/302.html

Generate a clickable link using the 'url' variable provided by the templating engine. This is useful for directing users to specific pages.

```html
[立即跳转]({{ url }})
```

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

### Send SMS in Laravel

Source: https://github.com/lizhipay/mcy-shop/blob/main/vendor/mrgoon/aliyun-sms/README.md

Use the AliSms class to send messages within a Laravel application.

```php
$aliSms = new AliSms();
$response = $aliSms->sendSms('phone number', 'SMS_code', ['name'=> 'value in your template']);
//dump($response);
```

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

### CSS for Scrollbar and Input Styling

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/LegalTerms.html

Provides CSS for optimizing scroll experience and styling checkboxes. It includes smooth scrolling, preventing page zoom, and custom checkbox appearance.

```css
.content {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #667eea;
  border-radius: 3px;
  background: white;
  position: relative;
  cursor: pointer;
}
input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: -2px;
  left: 2px;
  color: #667eea;
  font-size: 14px;
  font-weight: bold;
}
```

```css
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
  z-index: 1000;
}
```

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

### Submit HTML Form

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/User/Pay/Render/Submit.html

Submits an HTML form programmatically using its ID. Ensure the form element exists in the DOM.

```javascript
document.getElementById("request").submit();
```

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

### Delayed Browser Redirection

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/302.html

Implement a JavaScript setTimeout function to automatically redirect the user's browser after a specified delay. The delay is calculated based on a 'time' variable.

```javascript
setTimeout(() => { window.location.href = "{{ url }}"; }, 1000 * parseFloat("{{ time }}"))
```

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

### Style fatal error page with CSS

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/Runtime.html

Defines the visual appearance of the error page, including a scanline animation and terminal-like typography.

```css
html, body, div { margin: 0; padding: 0; } html { min-height: 100%; } body { box-sizing: border-box; height: 100%; background-color: #000000; background-image: radial-gradient(#333, #111); font-family: 'Inconsolata', Helvetica, sans-serif; font-size: 1.5rem; color: rgba(128, 128, 128, 0.8); text-shadow: 0 0 1ex rgba(51, 51, 51, 1), 0 0 2px rgba(255, 255, 255, 0.8); } .overlay { pointer-events: none; position: absolute; width: 100%; height: 100%; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); background-size: auto 4px; z-index: 99; } .overlay::before { content: ""; pointer-events: none; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, transparent 0%, rgba(128, 128, 128, 0.2) 2%, rgba(128, 128, 128, 0.8) 3%, rgba(128, 128, 128, 0.2) 3%, transparent 100%); background-repeat: no-repeat; animation: scan 7.5s linear 0s infinite; } @keyframes scan { 0% { background-position: 0 -100vh; } 35%, 100% { background-position: 0 100vh; } } .terminal { box-sizing: inherit; position: absolute; height: 100%; width: 1000px; max-width: 100%; padding: 4rem; /* text-transform: uppercase;*/ } .output { color: rgba(128, 128, 128, 0.8); text-shadow: 0 0 1ex rgba(51, 51, 51, 0.8), 0 0 2px rgba(255, 255, 255, 0.8); } .output::before { content: "> "; } a { color: #fff; text-decoration: none; } a::before { content: "["; } a::after { content: "]"; } .errorcode { color: white; }
```

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

### Internationalized Text Display

Source: https://github.com/lizhipay/mcy-shop/blob/main/app/View/302.html

Utilize an i18n function to display localized strings, such as security redirection messages. The '|raw' filter ensures the output is rendered directly.

```html
{{ i18n("我们正在为您的浏览器进行安全重定向，请稍等..")|raw }}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.