diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..49602d2
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,7 @@
+{
+ "typeAcquisition": {
+ "include": [
+ "jquery"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/public/cdn/js/tree.js b/public/cdn/js/tree.js
new file mode 100644
index 0000000..d0c0509
--- /dev/null
+++ b/public/cdn/js/tree.js
@@ -0,0 +1,279 @@
+function renderUlTree(options) {
+ var defaults = {
+ $: window.$,
+ elem: '',
+ onItemClick: function () {
+ console.log('点击目录项');
+ },
+ onItemToggle: function () {
+ console.log('点击收缩目录');
+ },
+ options: [
+ {
+ type: 'up',
+ },
+ {
+ type: 'down',
+ },
+ {
+ type: 'set',
+ },
+ {
+ type: 'delete',
+ },
+ ],
+ onOptionTrigger: function (type, item, e) {
+ switch (type) {
+ case 'up':
+ tthis.itemMoveUp(item)
+ break;
+ case 'down':
+ tthis.itemMoveDown(item)
+ break;
+ case 'delete':
+ tthis.itemDelete($(item).data('id'))
+ break;
+
+ default:
+ break;
+ }
+
+ },
+ list: []
+ }
+ var tthis = this;
+ var settings = {};
+ settings = $.extend({}, defaults, options);
+
+ $ = settings.$;
+
+ var thisDom = $(settings.elem);
+
+ this.appendItem = function (data) {
+
+ var defaults = {
+ id: 0,
+ pid: 0,
+ title: 0,
+ options: settings.options
+ };
+
+ var itemSetting = $.extend({}, defaults, data);
+
+ settings.list.push(itemSetting);
+ this.initList()
+ }
+
+ this.initList = function () {
+ var list = settings.list;
+
+ for (let initTimes = 0; initTimes < list.length; initTimes++) {
+ list.forEach(item => {
+ var itemFindKey = '.ul-tree-item.item-id-' + item.id;
+
+ if (thisDom.find(itemFindKey).length > 0) {
+ return true;
+ }
+
+ var itemParentFindKey = '.ul-tree-item.item-id-' + item.pid;
+
+ var itemHtml = this.getItemTpl();
+
+ if (item.pid == 0) {
+
+ var itemDom = $(itemHtml).appendTo(settings.elem);
+ } else {
+ var itemDom = $(itemHtml).appendTo($(itemParentFindKey).children('.ul-tree-item-children'))
+ }
+
+ this.initItem(itemDom, item)
+
+ });
+ }
+
+ };
+
+ this.initItem = function (itemDom, item) {
+ itemDom.data(item)
+
+ itemDom.addClass('item-id-' + item.id)
+ itemDom.children('.ul-tree-item-info').find('.ul-tree-item-title').text(item.title)
+
+
+ itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').children().remove()
+
+ item.options.forEach(option => {
+
+ if (typeof option.type == "undefined") {
+ option.type = 'set';
+ }
+
+ if (typeof option.className == 'undefined') {
+ option.className = 'layui-icon layui-icon-' + option.type;
+ }
+
+ if (typeof option.html == 'undefined') {
+ option.html = '
'
+ }
+ var domOption = $(option.html);
+
+ domOption.addClass('ul-tree-item-options-item');
+ domOption.data(option)
+ itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').append(domOption);
+
+ });
+ }
+ this.renderList = function () {
+ thisDom.find('.ul-tree-item').each(function (index, elem) {
+
+ tthis.renderItem(elem)
+ })
+ }
+ this.renderItem = function (itemTree) {
+
+ if ($(itemTree).data('is-rendered') == 1) {
+
+ return true;
+ }
+ $(itemTree).data('is-rendered', 1)
+
+ var parents = $(itemTree).parents('.ul-tree-item')
+
+ var level = parents.length
+ $(itemTree).find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 5 + 'px')
+ $(itemTree).find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 15 + 'px')
+
+ if ($(itemTree).children('.ul-tree-item-children').children().length == 0) {
+ $(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').hide()
+ } else {
+ $(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').show()
+
+ }
+
+ $(itemTree).children('.ul-tree-item-info').click(function (e) {
+
+ if ($(e.target).hasClass('ul-tree-item-icon')) {
+ var iconItem = e.target
+ if ($(iconItem).hasClass('layui-icon-triangle-d')) {
+ // 收缩
+ $(iconItem).removeClass('layui-icon-triangle-d')
+ $(iconItem).addClass('layui-icon-triangle-r')
+
+ $(itemTree).children('.ul-tree-item-children').hide()
+ } else {
+ // 展开
+ $(iconItem).addClass('layui-icon-triangle-d')
+ $(iconItem).removeClass('layui-icon-triangle-r')
+
+ $(itemTree).children('.ul-tree-item-children').show()
+ }
+
+ settings.onItemToggle(itemTree,e)
+
+ } else {
+ if ($(e.target).closest('.ul-tree-item-options').length > 0) {
+
+ settings.onOptionTrigger($(e.target).data('type'), itemTree, e)
+ } else {
+ settings.onItemClick(itemTree,e)
+
+ }
+
+ }
+ })
+
+
+ }
+
+ this.itemMoveUp = function (item) {
+ $(item).prev().insertAfter(item);
+ }
+ this.itemMoveDown = function (item) {
+ $(item).next().insertBefore(item);
+ }
+ this.itemDelete = function (id) {
+ var itemFindKey = '.ul-tree-item.item-id-' + id;
+ $(itemFindKey).remove();
+
+ var list = settings.list;
+
+ var newList = [];
+
+ list.forEach(data => {
+ if (data.id == id || data.pid == id) {
+ return true;
+ }
+ newList.push(data)
+ });
+ settings.list = list;
+ }
+
+ this.itemUpdate = function (newData) {
+
+ var list = settings.list;
+
+ var newList = [];
+
+ list.forEach(data => {
+ if (data.id == newData.id) {
+ data = $.extend({}, data, newData);
+
+ var itemFindKey = '.ul-tree-item.item-id-' + data.id;
+ var item = $(itemFindKey);
+ tthis.initItem(item, data)
+ }
+ newList.push(data)
+ });
+ settings.list = list;
+ }
+
+ this.getList = function () {
+ var list = settings.list;
+
+ list.forEach((data) => {
+ var itemFindKey = '.ul-tree-item.item-id-' + data.id;
+ var item = $(itemFindKey);
+ data.index = item.index();
+ });
+
+ return list;
+ }
+
+ function itemTpl() {
+ /*
+
+
+
+ 读书笔记
+
+
+
+
+
+
+
+
+ */
+ }
+
+ this.getItemTpl = function () {
+ var string = itemTpl.toString();
+
+ return string.substring(string.indexOf("/*") + 3, string.lastIndexOf("*/"));
+ }
+
+ if (typeof options.list != 'undefined') {
+ resetList(options.list);
+ }
+
+ function resetList(list) {
+ settings.list = [];
+
+ list.forEach(data => {
+ tthis.appendItem(data)
+ });
+ }
+
+ this.renderList()
+
+}
\ No newline at end of file
diff --git a/public/cdn/layui-ul.css b/public/cdn/layui-ul.css
index efb3db7..487ba4f 100644
--- a/public/cdn/layui-ul.css
+++ b/public/cdn/layui-ul.css
@@ -568,7 +568,12 @@
top : 10px;
}
-.ul-tree-item-option {
+.ul-tree-item-info:hover .ul-tree-item-options-item {
+ display: block;
+}
+
+.ul-tree-item-options {
+
position : absolute;
right : 15px;
top : 0;
@@ -576,9 +581,12 @@
display : flex;
align-items: center;
}
-.ul-tree-item-option-item{
+
+.ul-tree-item-options-item {
margin-left: 10px;
+ display : none;
}
+
.ul-note-item {
display : flex;
justify-content: flex-start;