repository·master·Indexed 26 days ago
https://github.com/newpanjing/simpleuiA modern Django Admin theme built with Element-UI and Vue. It replaces the default Django Admin interface with a user-friendly UI featuring multi-tab pages and 28 built-in themes. Includes a global `window.app` object for programmatic tab and navigation control, and a custom `v-waves` Vue directive for ripple effects.
You can quickly experience SimpleUI by running the official demo container.
```shell
docker pull newpanjing/simpleui_demo
docker run -p 8080:8080 newpanjing/simpleui_demoAfter starting, access the demo at: http://127.0.0.1:8080
Update your existing installation to the latest version using pip.
pip install django-simpleui --upgradeInstall the SimpleUI theme for Django using pip.
pip install django-simpleuiIf you prefer to install from the source code, clone the repository and use setup.py.
git clone https://github.com/newpanjing/simpleui
cd simpleui
python setup.py sdist installTo activate SimpleUI, add 'simpleui' to the top of your INSTALLED_APPS list in settings.py. It must appear before 'django.contrib.admin' to override the default Django admin interface.
# Application definition
INSTALLED_APPS = [
'simpleui',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
...
]DEBUG mode is set to False, you must collect the SimpleUI static files to your root static directory. Ensure STATIC_ROOT is configured in settings.py first.v-waves that attaches a ripple effect (using the Waves library) to the element it is bound to upon insertion into the DOM.getLanuage function to retrieve translated strings from the Lanuages object. If the key is not found or the object is missing, it returns the provided key as a fallback.The main application instance is exposed globally as window.app. You can use it to programmatically manage tabs and navigation within the admin interface.
Key methods:
openTab(data, index, selected, loading): Opens a new tab or selects an existing one. data should be an object containing url, name, and optionally eid (unique ID) or breadcrumbs.handleTabsEdit(targetId, action): Manages tab lifecycle. Use action: 'remove' to close a specific tab.logout(): Triggers the logout process, clearing session data and submitting the #logout_form.goZoom() method on the app instance toggles the browser's full-screen mode, supporting various vendor prefixes (webkit, moz, ms).The SimpleUI client-side application provides a global addEvent function to allow child pages (loaded via iframes) to register event handlers that respond to theme or font changes in the main admin interface.
theme: Triggered when the admin theme is changed.font: Triggered when the font size is adjusted.