返回首页

网站插件开发

插件是 DCSHOP 最常见的扩展方式,可以实现功能增强、界面美化、数据处理等各种需求。

插件文件结构

content/plugins/
└── example_plugin/ # 插件目录(英文小写+下划线)
    ├── example_plugin.php # 主文件(必须)
    ├── example_plugin_setting.php # 设置页面(可选)
    ├── assets/ # 静态资源(可选)
    │   ├── style.css
    │   └── script.js
    └── icon.png # 插件图标(可选,建议 128x128)

主文件模板

<?php
/*
Plugin Name: 示例插件
Version: 1.0.0
Plugin URL: https://your-website.com
Description: 这是一个示例插件,演示基本的插件开发流程
Author: 开发者名称
Author URL: https://your-website.com
Ui: Layui
*/

defined('DC_ROOT') || exit('access denied!');

/**
 * 插件初始化函数
 */
function example_plugin_init() {
    // 获取插件配置
    $storage = Storage::getInstance('example_plugin');
    $enabled = $storage->getValue('enabled') ?: 'y';
    
    if ($enabled !== 'y') {
        return;
    }
    
    // 插件逻辑代码
}

/**
 * 在后台页脚输出内容
 */
function example_plugin_admin_footer() {
    $storage = Storage::getInstance('example_plugin');
    $message = $storage->getValue('message') ?: 'Hello World!';
    
    echo "<script>console.log('{$message}');</script>";
}

// 注册钩子
addAction('adm_footer', 'example_plugin_admin_footer');

设置页面模板

设置页面需要定义两个函数:plugin_setting_view() 显示表单,plugin_setting() 处理提交。

<?php
defined('DC_ROOT') || exit('access denied!');

/**
 * 显示设置表单
 */
function plugin_setting_view() {
    $storage = Storage::getInstance('example_plugin');
    $enabled = $storage->getValue('enabled') ?: 'y';
    $message = $storage->getValue('message') ?: '';
    ?>
    <form class="layui-form" id="form" method="post" action="./plugin.php?plugin=example_plugin&action=setting">
        <div style="padding: 25px;" id="open-box">
            <blockquote class="layui-elem-quote">
                <i class="ri-information-line"></i> 在此处填写插件配置说明
            </blockquote>

            <div class="layui-form-item">
                <label class="layui-form-label">启用插件</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="enabled" lay-skin="switch" lay-text="启用|禁用" <?= $enabled == 'y' ? 'checked' : '' ?>>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">自定义消息</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="message" value="<?= htmlspecialchars($message) ?>" placeholder="请输入消息内容">
                </div>
            </div>
            
            <div style="height: 80px;"></div>
        </div>

        <div style="width: 100%; height: 50px;"></div>
        <div id="form-btn">
            <div class="layui-input-block" style="margin: 0 auto;">
                <button type="submit" class="layui-btn" lay-submit lay-filter="submit"><i class="ri-check-line"></i> 保存配置</button>
                <button type="reset" class="layui-btn layui-btn-primary"><i class="ri-refresh-line"></i> 重置</button>
            </div>
        </div>
    </form>

    <style>
        html, body { overflow: hidden !important; }
    </style>

    <script>
        layui.use(['form'], function(){
            var $ = layui.$;
            var form = layui.form;
            
            form.on('submit(submit)', function(data){
                var field = data.field;
                field.enabled = field.enabled ? 'y' : 'n';
                var url = $('#form').attr('action');
                
                $.ajax({
                    type: "POST",
                    url: url,
                    data: field,
                    dataType: "json",
                    success: function(e) {
                        if(e.code == 400) return layer.msg(e.msg);
                        layer.msg('已保存配置');
                        setTimeout(function() {
                            parent.layer.close('edit');
                        }, 500);
                    },
                    error: function(xhr) {
                        layer.msg(JSON.parse(xhr.responseText).msg);
                    }
                });
                return false;
            });
            
            form.render();
        });

        var maxHeight = $(window.parent).innerHeight() * 0.75;
        $("#open-box").css({ "max-height": maxHeight + "px", "overflow-y": "auto" });
    </script>
<?php }

/**
 * 处理表单提交
 */
function plugin_setting() {
    $enabled = Input::postStrVar('enabled') ?: 'n';
    $message = Input::postStrVar('message');
    
    $storage = Storage::getInstance('example_plugin');
    $storage->setValue('enabled', $enabled);
    $storage->setValue('message', trim($message));
    
    Output::ok();
}

深色模式适配

所有插件输出的前端内容必须支持深色模式:

/* 浅色模式(默认) */
.my-plugin-box {
    background: #fff;
    color: #333;
    border: 1px solid #eee;
}

/* 深色模式 */
html[data-theme="dark"] .my-plugin-box {
    background: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}

深色模式常用颜色

用途浅色模式深色模式
页面背景#fff#1a1a1a
卡片背景#fff#1e1e1e
主要文字#333#e0e0e0
次要文字#666#b0b0b0
边框颜色#eee#333
输入框背景#fff#2a2a2a