OSCHINA-MIRROR/IKKI2000-KendoUI-Admin-Site

🌸 Kendo UI Admin & Site 🌌

Kendo UI Admin & Site основан на Kendo UI for jQuery и Bootstrap 4.

Демонстрация на кодовом облаке: https://ikki2000.gitee.io/kendoui-admin-site/

🌟 Особенности (Features)

Без фронтенд-инжиниринга, нулевая конфигурация.
Не нужно скачивать и устанавливать, можно сразу пользоваться после распаковки.
Разделение между фронтендом и бэкендом.
MVVM — модель-представление-вид (by Kendo UI for jQuery).
SPA — одностраничное приложение (by Kendo UI for jQuery).
Router — маршрутизация страниц (by Kendo UI for jQuery).
Templates — рендеринг шаблонов (by Kendo UI for jQuery).
Data Source — единый источник данных (by Kendo UI for jQuery).
Адаптивный дизайн для ПК и мобильных устройств (by Bootstrap 4).
Нет CSS Sprites, векторизованные значки шрифтов (by Font Awesome).
Единый стиль для веб-сайта и интерфейса администратора.
Поддержка шести комбинированных макетов для административного интерфейса:
- Маршрутизируемая версия (Router Edition) — рекомендуется.
- Версия с фреймами (iFrame Edition).
- Версия с вкладками (Tabstrip Edition).
- Версии с разделением экрана и маршрутизацией (Splitter Router Edition).
- Версии с разделением экрана и фреймами (Splitter iFrame Edition).
- Версии с разделением экрана и вкладками (Splitter Tabstrip Edition).
Динамическая настройка меню и навигации.
Предварительная обработка стилей с помощью Sass.
Восемь комплектов, 126 вариантов цветовых схем на выбор:
- IKKI Amikoko (14 вариантов).
- HarmonyOS Design (12 вариантов).
- Ant Design (13 вариантов).
- Kendo UI Less (16 вариантов). Kendo UI Sass
Kendo UI Classic
Bootstrap
Material Design

Официальный поставщик услуг по локализации для Kendo UI на китайский язык (традиционный и упрощённый)

🌐 Поддержка браузерами

IE10 и выше, современные браузеры и настольные приложения Electron

IE	Edge	Firefox	Chrome	Safari	Opera	Electron
10, 11	последние 2 версии	последние 2 версии	последние 2 версии	последние 2 версии	последние 2 версии	последние 2 версии

📖 Руководство по использованию

Скачайте и распакуйте в корневую папку проекта.
Измените <base> в следующих пяти HTML-файлах на локальный путь разработки.

index.html
--- <base href="https://ikki2000.gitee.io/kendoui-admin-site/">
+++ <base href="http://localhost:8888/YourProject/">

admin/login.html & admin/index.html
--- <base href="https://ikki2000.gitee.io/kendoui-admin-site/" type="admin">
+++ <base href="http://localhost:8888/YourProject/" type="admin">

site/login.html & site/index.html
--- <base href="https://ikki2000.gitee.io/kendoui-admin-site/" type="site">
+++ <base href="http://localhost:8888/YourProject/" type="site">

Обратите внимание: не забудьте добавить / в конце.

Измените apiPath в следующих JS-файлах на корневой путь API сервера. Восстановите три параметра по умолчанию.

js/ikki.js

// Конфигурация пути API
--- var apiPath = 'https://ikki2000.gitee.io/kendoui-admin-сайт/';
+++ var apiPath = 'https://dev.YourDomain.com/api/';

// Отправка Ajax
--- ajaxType: 'get', // Gitee Pages демонстрирует только поддержку запросов get, пожалуйста, измените обратно на post для обычного использования
+++ ajaxType: 'post',
--- urlType: 'static', // Gitee Pages демонстрирует интерфейс как статический файл json, пожалуйста, измените обратно на api для обычного использования
+++ urlType: 'api',

// Отправка данных с потоком Ajax
--- ajaxType: 'get', // Gitee Pages демонстрирует только поддержку запросов get, пожалуйста, измените обратно на post для обычного использования
+++ ajaxType: 'post'

Откройте index.html с помощью редактора IDE (например, WebStorm) и выберите запуск локального сервиса.
```
http://localhost:8888/YourProject/index.html
```
Или: создайте и запустите локальный веб-сервис любым способом и измените IP и порт на шаге 2, затем откройте index.html.
```
http://192.x.x.x:8888/YourProject/index.html
```

💻 Руководство разработчика

Все дочерние модули страниц находятся в каталоге views или его подкаталогах.
Каждый дочерний модуль страницы состоит из одноимённых файлов xxx.html и xxx.js.
Первая строка шаблона ID каждого дочернего модуля страницы формируется из имени файла xxx и Temp.

<script id="xxxTemp" type="text/x-kendo-template">

Стиль, применяемый только к текущему дочернему модулю страницы, записывается в HTML-файл модуля.

<style scoped>
···
</style>

CSS-файл, применяемый только к текущему дочернему модулю страницы, импортируется через @import в HTML-файл модуля.

<style scoped>
@import "css/plugin.min.css";
</style>

Базовая структура HTML-файла дочернего модуля страницы выглядит следующим образом:

<script id="xxxTemp" type="text/x-kendo-template">
    <div>
        ···
    </div>
    <script id="otherTemplate" type="text/x-kendo-template">
        ···
    </script>
    <style scoped>
        ···
    </style>
</script>

Плагин JS, применяемый только к текущему дочернему модулю страницы, импортируется через $.getScript() в JS-файл модуля.

$.getScript('js/plugin.min.js');

Локальные данные Mock для верхнего меню находятся в json/menu.json. Ключ url содержит метод linkTo, который является функцией маршрутизации. Первый параметр — это каталог, в котором находится дочерний модуль страницы относительно каталога views. Второй параметр — это имя дочернего модуля страницы. Ключ cssClass — это DOM, используемый для хлебных крошек. height | string | — | 弹出页高度, px 或 %

| | url | string | — | 弹出页显示的 iFrame 链接地址

showBigPic | — | — | — | 大图预览

| | url | string | — | 大图的绝对路径

numericRange | — | — | — | 数字型范围

| | format | string | — | 格式

| | step | number | — | 步进

| | min | number | — | 最小值

| | max | number | — | 最大值

dateRange | — | — | — | 日期型范围

dateInputRange | — | — | — | 日期输入型范围

serializeObject | — | — | — | 表单序列化 json 对象 📜 Список функций

Основные функции ✔️

Верхнее меню ⏳

Свернуть навигацию
Хлебные крошки
Глобальный поиск (https://ikki2000.gitee.io/kendoui-admin-site/admin/#/search)
Обновить
Полный экран
Блокировка экрана
Темы
- IKKI Amikoko
- HarmonyOS Design
- Ant Design
- Kendo UI Less
- Kendo UI Sass
- Kendo UI Classic
- Bootstrap
- Material Design
- Nouvelle
Языки
- Китайский упрощённый
- Китайский традиционный
- Английский
- Русский
- Французский
- Немецкий
- Испанский
- Португальский
- Итальянский
- Арабский
- Японский
- Корейский Сообщение
Написать письмо
Входящие
Исходящие
SMS
Адресная книга

Уведомления

Системные уведомления
Личные обновления
Задачи

Имя пользователя и аватар

Перейти на сайт
Личный кабинет
Изменить пароль
Настройки
Редактор навигации
Выйти из системы

Левый навигационный блок

Панель инструментов

Формы
- Основные элементы формы
- Отправка формы POST
- Отправка формы AJAX
- Выбор диапазона
- Поиск по шаблону
- Диалоговые окна и модальные окна
- Каскадный выбор
- Интерактивная карта
- Копирование и добавление групп
Таблицы
- Полный поиск и пользовательская редакция
- Редактирование в модальном окне с проверкой
- Внутреннее редактирование с проверкой
- Редактирование ячейки с проверкой
- Копирование, добавление и синхронизация данных
- Пользовательские кнопки
- Выборочная отправка
- Группировка, суммирование, сортировка и фильтрация
- Детализация строк и прокрутка страниц
- Шаблоны строк и интервалов
- Объединение заголовков и разделение строк
Деревья
- Полноценный поиск и пользовательское редактирование
- Редактирование в модальном окне с проверкой
- Внутреннее редактирование с проверкой
- Редактирование ячеек с проверкой
- Выборочная отправка Сводная таблица функций сайта Kendoui Admin Site

Функции	Описание
Деревовидная структура
Полные функции перетаскивания и пользовательского редактирования
Объединение заголовков и разделение строк
Деревовидная структура (Trees)
Полное перетаскивание и настраиваемое редактирование
Редактирование выбора узла
Пользовательские значки
Флажки и полувыборы
Список
Полный макет и пользовательское редактирование
Многомодульный пользовательский макет
Настраиваемая сетка
Переключение больших изображений
Групповая сводка и сортировка
Шаблоны интервалов и прокрутка
Список (Lists)
Распределение
Поиск в таблице и выбор двойным щелчком
Прямое перетаскивание дерева
Выбор уровня дерева двойным щелчком
Поиск и выбор списка двойным щелчком
Перетаскивание с помощью рамки выбора
Распределение (Assigns)
Фреймворк
Глобализация
Модель представления (MVVM)
Источник данных
Шаблоны
Одностраничное приложение (SPA)
Значки
Рисование
События касания
Интеграция
Фреймворк (Framework)
Макет
Разделитель макета страницы
Адаптивная панель
Расширяемая панель
Аватар
Бейдж
Чип
Список чипов
Макет (Layout)	* [x] Плитка (TileLayout)

Данные (Data)

Мобильный интерфейс:

🔗 Связанные ссылки:

jQuery (v1.12.4) — поддержка v3.6.0;
Kendo UI for jQuery официальный сайт (v2021.3.1207);
Темы Kendo UI (v4.43.0);
Bootstrap (v4.6.2);
Font Awesome (v5.15.4);
Цвета HarmonyOS Design;
Цвета Ant Design;
Цвета Material Design;
Флаги (v6.6.6);
Иконки погоды (v2.0.10);
Count Up (v1.9.3);
Verify (v0.1.1);
JavaScript MD5 (v2.19.0);
Particleground (v1.1.0);
Live2D Widget (v3.0.5);
Программа поддержки открытого исходного кода JetBrains;
WebStorm от JetBrains (v2022.1 x64).