标签调整，优化

src/main/java/com/yaoyuan/jiscuss/controller/UserPageController.java

@@ -49,6 +49,7 @@ public class UserPageController {
 
     /**
      * 用户页面
+     *
      * @return
      */
     @RequestMapping("/user")

src/main/java/com/yaoyuan/jiscuss/controller/UserPostController.java

@@ -201,6 +201,7 @@ public class UserPostController extends BaseController {
 
     /**
      * 新建主题页
+     *
      * @param request
      * @param map
      * @return
@@ -209,7 +210,7 @@ public class UserPostController extends BaseController {
     public String newdiccuss(HttpServletRequest request, ModelMap map) {
 
         //获取所有标签（以后尝试去缓存中取）
-        List<Tag> allTags = tagsService.getAllList();
+        List<Tag> allTags = tagsService.getAllListDiscussions();
         map.put("allTags", allTags);
 
         UserInfo user = getUserInfo(request);
@@ -222,6 +223,7 @@ public class UserPostController extends BaseController {
 
     /**
      * 新建标签页
+     *
      * @param request
      * @param map
      * @return

src/main/java/com/yaoyuan/jiscuss/controller/UserSystemController.java

@@ -41,6 +41,7 @@ public class UserSystemController extends BaseController {
 
     /**
      * 首页index
+     *
      * @param tag
      * @param type
      * @param pageNum
@@ -49,8 +50,8 @@ public class UserSystemController extends BaseController {
      * @return
      */
     @RequestMapping({"/", "/main", "/index"})
-    public String home(@RequestParam(defaultValue = "all") String tag, @RequestParam(defaultValue = "all") String type, @RequestParam(defaultValue = "1") Integer
+    public String home(@RequestParam(defaultValue = "all") String tag, @RequestParam(defaultValue = "all") String type,
-            pageNum, HttpServletRequest request, ModelMap map) {
+                       @RequestParam(defaultValue = "1") Integer pageNum, HttpServletRequest request, ModelMap map) {
         logger.info(">>> index");
         logger.info(">>> tag:" + tag);
         logger.info(">>> pageNum:" + pageNum);
@@ -77,6 +78,12 @@ public class UserSystemController extends BaseController {
         List<Tag> allTags = tagsService.getAllList();
         logger.info("全部标签==>：{}", allTags);
 
+        if(!tag.equals("all")){
+            //获取是否有子标签
+            List<Tag> allChildTags = tagsService.findByParentId(tag);
+            map.put("allChildTags", allChildTags);
+        }
+
         map.put("data", "Jiscuss 用户");
         map.put("allDiscussions", newAllD);
         map.put("allUser", usersService.getAllList());
@@ -108,6 +115,7 @@ public class UserSystemController extends BaseController {
 
     /**
      * 组装DiscussionCustom
+     *
      * @param newAllD
      * @param allDiscussions
      */
@@ -162,6 +170,7 @@ public class UserSystemController extends BaseController {
 
     /**
      * 分页信息
+     *
      * @param size
      * @return
      */
@@ -176,6 +185,7 @@ public class UserSystemController extends BaseController {
 
     /**
      * 登录页
+     *
      * @param error
      * @param logout
      * @param map
@@ -199,6 +209,7 @@ public class UserSystemController extends BaseController {
 
     /**
      * 注册提交
+     *
      * @param username
      * @param email
      * @param password
@@ -228,6 +239,7 @@ public class UserSystemController extends BaseController {
 
     /**
      * 注册页面
+     *
      * @return
      */
     @RequestMapping("/register")

src/main/java/com/yaoyuan/jiscuss/entity/Discussion.java

@@ -11,6 +11,7 @@ import javax.persistence.Id;
 import javax.persistence.Table;
 
 import lombok.Data;
+
 @Data
 @Entity
 @Table(name = "discussion")

src/main/java/com/yaoyuan/jiscuss/entity/DiscussionTag.java

@@ -5,6 +5,7 @@ import java.io.Serializable;
 import javax.persistence.*;
 
 import lombok.Data;
+
 @Data
 @Entity
 @Table(name = "discussiontag")

src/main/java/com/yaoyuan/jiscuss/entity/User.java

@@ -15,8 +15,6 @@ import javax.persistence.Id;
 import javax.persistence.Table;
 
 
-
-
 import lombok.Data;
 import org.springframework.security.core.GrantedAuthority;
 import org.springframework.security.core.userdetails.UserDetails;

src/main/java/com/yaoyuan/jiscuss/entity/custom/PostCustom.java

@@ -36,5 +36,4 @@ public class PostCustom extends Post {
     private List<PostCustom> child;
 
 
-
 }

src/main/java/com/yaoyuan/jiscuss/handler/CustomAccessDeniedHandler.java

@@ -17,8 +17,8 @@ import java.io.PrintWriter;
 
 /**
  * 处理无权请求
- * @author charlie
  *
+ * @author charlie
  */
 @Component
 public class CustomAccessDeniedHandler implements AccessDeniedHandler {

src/main/java/com/yaoyuan/jiscuss/handler/RbacPermission.java

@@ -9,8 +9,8 @@ import java.util.List;
 
 /**
  * RBAC数据模型控制权限
- * @author charlie
  *
+ * @author charlie
  */
 @Component("rbacPermission")
 public class RbacPermission {

src/main/java/com/yaoyuan/jiscuss/repository/DiscussionsRepository.java

@@ -20,5 +20,4 @@ public interface DiscussionsRepository extends JpaRepository<Discussion,Integer>
     Page<Discussion> findByQuery(String tagId, Pageable pageable);
 
 
-
 }

src/main/java/com/yaoyuan/jiscuss/repository/PostsRepository.java

@@ -14,7 +14,6 @@ import java.util.Map;
 public interface PostsRepository extends JpaRepository<Post, Integer> {
 
     /**
-     *
      * @param dId
      * @return
      */

src/main/java/com/yaoyuan/jiscuss/repository/TagsRepository.java

@@ -23,4 +23,8 @@ public interface TagsRepository extends JpaRepository<Tag,Integer> {
             "where u.id=d.tagId and d.discussionId in (:discussionIdlist)")
     List<TagCustom> findByDiscussionIdlistId(@Param(value = "discussionIdlist") List<Integer> discussionIdlist);
 
+    List<Tag> findByParentId(Integer tagId);
+
+    @Query(value = "FROM Tag a WHERE a.parentId is null")
+    List<Tag> findAllIsNull();
 }

src/main/java/com/yaoyuan/jiscuss/repository/UsersRepository.java

@@ -13,7 +13,6 @@ import com.yaoyuan.jiscuss.entity.User;
 @Repository
 public interface UsersRepository extends JpaRepository<User, Integer> {
     /**
-    *
      * @param username
      * @return
      */
@@ -21,14 +20,12 @@ public interface UsersRepository extends JpaRepository<User,Integer> {
     List<User> getByUsernameIsLike(@Param("username") String username);
 
     /**
-    *
      * @param id
      * @return
      */
     User getById(Integer id);
 
     /**
-    *
      * @param username
      * @return
      */
@@ -36,7 +33,6 @@ public interface UsersRepository extends JpaRepository<User,Integer> {
     User getByUsername(String username);
 
     /**
-    *
      * @param username
      * @param password
      * @return

src/main/java/com/yaoyuan/jiscuss/response/ResponseResult.java

@@ -7,6 +7,7 @@ import lombok.Data;
 
 /**
  * 统一的公共响应体
+ *
  * @author NULL
  * @date 2019-12-16
  */

src/main/java/com/yaoyuan/jiscuss/service/ITagsService.java

@@ -14,4 +14,8 @@ public interface ITagsService {
     List<Tag> findByDId(Integer id);
 
     List<TagCustom> findByDiscussionIdlistId(List<Integer> discussionIdLsit);
+
+    List<Tag> findByParentId(String tag);
+
+    List<Tag> getAllListDiscussions();
 }

src/main/java/com/yaoyuan/jiscuss/service/impl/TagsServiceImpl.java

@@ -20,6 +20,11 @@ public class TagsServiceImpl implements ITagsService {
 
     @Override
     public List<Tag> getAllList() {
+        return tagsRepository.findAllIsNull();
+    }
+
+    @Override
+    public List<Tag> getAllListDiscussions() {
         return tagsRepository.findAll();
     }
 
@@ -37,6 +42,12 @@ public class TagsServiceImpl implements ITagsService {
     public List<TagCustom> findByDiscussionIdlistId(List<Integer> discussionIdLsit) {
         return tagsRepository.findByDiscussionIdlistId(discussionIdLsit);
     }
+
+    @Override
+    public List<Tag> findByParentId(String tag){
+        int tagId = Integer.parseInt(tag);
+        return tagsRepository.findByParentId(tagId);
+    }
 }
 
 

src/main/java/com/yaoyuan/jiscuss/service/impl/UsersServiceImpl.java

@@ -1,8 +1,6 @@
 package com.yaoyuan.jiscuss.service.impl;
 
 
-
-
 import java.util.List;
 
 import javax.transaction.Transactional;
@@ -29,6 +27,7 @@ public class UsersServiceImpl implements IUsersService {
 
     /**
      * 获取全部用户
+     *
      * @return
      */
     @Cacheable(value = "user")
@@ -39,6 +38,7 @@ public class UsersServiceImpl implements IUsersService {
 
     /**
      * 分页查询
+     *
      * @param pageNum
      * @param pageSize
      * @return
@@ -53,6 +53,7 @@ public class UsersServiceImpl implements IUsersService {
 
     /**
      * 根据名称模糊查询
+     *
      * @param name
      * @return
      */
@@ -63,6 +64,7 @@ public class UsersServiceImpl implements IUsersService {
 
     /**
      * 根据id查询
+     *
      * @param id
      * @return
      */
@@ -74,6 +76,7 @@ public class UsersServiceImpl implements IUsersService {
 
     /**
      * 新增
+     *
      * @param user
      * @return
      */
@@ -85,6 +88,7 @@ public class UsersServiceImpl implements IUsersService {
 
     /**
      * 更新修改
+     *
      * @param user
      * @param id
      * @return
@@ -97,6 +101,7 @@ public class UsersServiceImpl implements IUsersService {
 
     /**
      * 移除
+     *
      * @param id
      */
     @CacheEvict(value = "user", key = "#id")
@@ -115,6 +120,7 @@ public class UsersServiceImpl implements IUsersService {
 
     /**
      * 根据名称查询
+     *
      * @param username
      * @return
      */
@@ -125,6 +131,7 @@ public class UsersServiceImpl implements IUsersService {
 
     /**
      * 验证用户名密码
+     *
      * @param username
      * @param password
      * @return

src/main/java/com/yaoyuan/jiscuss/util/DelTagsUtil.java

@@ -7,13 +7,14 @@ package com.yaoyuan.jiscuss.util;
  * @Description:
  * @date 2020/8/31 20:52
  */
+
 /**
  * 去除内容页代码里的HTML标签
- *
  */
 public class DelTagsUtil {
     /**
      * 去除html代码中含有的标签
+     *
      * @param htmlStr
      * @return
      */
@@ -37,8 +38,10 @@ public class DelTagsUtil {
         htmlStr = htmlStr.replaceAll(spaceRegex, "");
         return htmlStr.trim(); // 返回文本字符串
     }
+
     /**
      * 获取HTML代码里的内容
+     *
      * @param htmlStr
      * @return
      */

src/main/resources/application.yml

@@ -1,22 +1,29 @@
-#mysql 配置
+#h2 配置
 spring:
   cache:
     type: ehcache
     ehcache:
       config: classpath:ehcache.xml
   jpa:
-    database: MYSQL
+    generate-ddl: false
     show-sql: true
     hibernate:
-      ddl-auto: update
+      ddl-auto: none
+  h2:
+    console:
+      path: /h2-console
+      enabled: true
+      settings:
+        web-allow-others: true
   datasource:
-    url: jdbc:mysql://127.0.0.1:3306/jiscuss?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8&autoReconnect=true&useSSL=false
+    platform: h2
-    username: root
+    url: jdbc:h2:~/testjiscuss
-    password: 123456
+    username: sa
-    driver-class-name: com.mysql.cj.jdbc.Driver
+    password:
+    schema: classpath:schema.sql
+    data: classpath:data.sql
+    driver-class-name: org.h2.Driver
     type: com.alibaba.druid.pool.DruidDataSource
-    tomcat:
-      init-s-q-l: SET NAMES utf8mb4
     druid:
       min-idle: 2
       initial-size: 5
@@ -27,7 +34,7 @@ spring:
       filter:
         stat:
         enabled: true
-        db-type: mysql
+        db-type: h2
         log-slow-sql: true
         slow-sql-millis: 2000
       # 监控过滤器

src/main/resources/data.sql

@@ -45,7 +45,7 @@ insert into discussion
 values (11, '测试主题11', '测试内容3测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',null,null,null,null,null,null,null,1,null,null,null,null,null,null,null);
 
 insert into tag
-values (1, '测试标签1',null,null,null,null,null,null,null,null,null,null);
+values (1, '测试标签1',null,null,'edit',null,null,null,null,null,null,null);
 
 
 insert into post

src/main/resources/static/js/user/system.js

@@ -37,8 +37,6 @@ $("#nextPage").click(function () {
 });
 
 
-
-
 $("#createNewDiccuss2").click(function () {
     console.log("点击  createNewDiccuss2");
     console.log(username);
@@ -73,12 +71,13 @@ $("#createNewDiccuss2").click(function () {
 
 
 function onTags(data) {
-    console.log('123');
+    console.log('点击标签跳转' + data);
-    console.log(data);
+    if (username && username != null) {
+        window.location.href = '/main?tag=' + data
+    } else {
+        window.location.href = '/?tag=' + data
+    }
 }
-
-
-
 
 $('#menu')
     .sticky({

src/main/resources/templates/comm/header.ftl

@@ -1,4 +1,4 @@
-<div class="ui main  menu" >
+<div class="ui main  menu" id="menu">
     <div class="ui container">
         <div href="/" class="header borderless item">
             <img class="logo" src="static/assets/images/logo.png">
@@ -10,9 +10,7 @@
             更多
             <i class="dropdown icon"></i>
             <div class="menu transition hidden" tabindex="-1">
-                <div class="item">行为</div>
+                <a class=" item " href="/user">用户页</a>
-                <div class="item">另一个行为</div>
-                <div class="item">其他东西</div>
                 <div class="divider"></div>
                 <div class="item">分割链接</div>
                 <div class="divider"></div>
@@ -40,5 +38,4 @@
     </div>
 </div>
 
-
 <script type="text/javascript" charset="UTF-8" src="/static/js/user/header.js"></script>

src/main/resources/templates/discussions.ftl

@@ -20,7 +20,7 @@
         <i class="close icon"></i>
         <div class="header">欢迎来到这里</div>
         <ul class="list">
-            <li>JAVA + DISCUSS = JISCUSS 。${posts?size}</li>
+            <li>JAVA + DISCUSS = JISCUSS 。</li>
             <li>简单的，易用的JAVA论坛。</li>
             <li>请享受发帖回帖带来的乐趣吧！</li>
         </ul>

src/main/resources/templates/index.ftl

@@ -32,7 +32,8 @@
     <div class="ui four column grid">
         <div class="widescreen  large screen computer tablet only four wide column">
 
-            <div class="fluid ui animated fade primary button" tabindex="0" id="createNewDiccuss2" style=" margin-bottom: 20px;">
+            <div class="fluid ui animated fade primary button" tabindex="0" id="createNewDiccuss2"
+                 style=" margin-bottom: 20px;">
                 <div class="visible content">
                     <i class="pen square icon"></i>创建新帖
                 </div>
@@ -95,19 +96,58 @@
                                     <i class="dropdown icon"></i>
                                     <div class="default text">选择颜色</div>
                                     <div class="menu">
-                                        <div class="item" data-value="red"><div class="ui red empty circular label"></div>红色</div>
+                                        <div class="item" data-value="red">
-                                        <div class="item" data-value="orange"><div class="ui orange empty circular label"></div>橙色</div>
+                                            <div class="ui red empty circular label"></div>
-                                        <div class="item" data-value="yellow"><div class="ui yellow empty circular label"></div>黄色</div>
+                                            红色
-                                        <div class="item" data-value="olive"><div class="ui olive empty circular label"></div>橄榄绿</div>
+                                        </div>
-                                        <div class="item" data-value="green"><div class="ui green empty circular label"></div>纯绿</div>
+                                        <div class="item" data-value="orange">
-                                        <div class="item" data-value="teal"><div class="ui teal empty circular label"></div>水鸭蓝</div>
+                                            <div class="ui orange empty circular label"></div>
-                                        <div class="item" data-value="blue"><div class="ui blue empty circular label"></div>纯蓝</div>
+                                            橙色
-                                        <div class="item" data-value="violet"><div class="ui violet empty circular label"></div>紫罗兰</div>
+                                        </div>
-                                        <div class="item" data-value="purple"><div class="ui purple empty circular label"></div>纯紫</div>
+                                        <div class="item" data-value="yellow">
-                                        <div class="item" data-value="pink"><div class="ui pink empty circular label"></div>粉红</div>
+                                            <div class="ui yellow empty circular label"></div>
-                                        <div class="item" data-value="brown"><div class="ui brown empty circular label"></div>棕色</div>
+                                            黄色
-                                        <div class="item" data-value="grey"><div class="ui grey empty circular label"></div>灰色</div>
+                                        </div>
-                                        <div class="item" data-value="black"><div class="ui black empty circular label"></div>黑色</div>
+                                        <div class="item" data-value="olive">
+                                            <div class="ui olive empty circular label"></div>
+                                            橄榄绿
+                                        </div>
+                                        <div class="item" data-value="green">
+                                            <div class="ui green empty circular label"></div>
+                                            纯绿
+                                        </div>
+                                        <div class="item" data-value="teal">
+                                            <div class="ui teal empty circular label"></div>
+                                            水鸭蓝
+                                        </div>
+                                        <div class="item" data-value="blue">
+                                            <div class="ui blue empty circular label"></div>
+                                            纯蓝
+                                        </div>
+                                        <div class="item" data-value="violet">
+                                            <div class="ui violet empty circular label"></div>
+                                            紫罗兰
+                                        </div>
+                                        <div class="item" data-value="purple">
+                                            <div class="ui purple empty circular label"></div>
+                                            纯紫
+                                        </div>
+                                        <div class="item" data-value="pink">
+                                            <div class="ui pink empty circular label"></div>
+                                            粉红
+                                        </div>
+                                        <div class="item" data-value="brown">
+                                            <div class="ui brown empty circular label"></div>
+                                            棕色
+                                        </div>
+                                        <div class="item" data-value="grey">
+                                            <div class="ui grey empty circular label"></div>
+                                            灰色
+                                        </div>
+                                        <div class="item" data-value="black">
+                                            <div class="ui black empty circular label"></div>
+                                            黑色
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -124,8 +164,12 @@
                                         <div class="item" data-value="fax"><i class="fax"></i>fax</div>
                                         <div class="item" data-value="bug"><i class="bug"></i>bug</div>
                                         <div class="item" data-value="keyboard"><i class="keyboard"></i>keyboard</div>
-                                        <div class="item" data-value="folder open outline"><i class="folder open outline"></i>folder open outline</div>
+                                        <div class="item" data-value="folder open outline"><i
-                                        <div class="item" data-value="comment outline"><i class="comment outline"></i>comment outline</div>
+                                                    class="folder open outline"></i>folder open outline
+                                        </div>
+                                        <div class="item" data-value="comment outline"><i class="comment outline"></i>comment
+                                            outline
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -153,28 +197,31 @@
                 </div>
                 <div class="content">
                     <div class="ui ordered list">
-                        <div class="item">
-                            <i class="folder icon"></i>
-                            <div class="content">
-                                <div class="header">test</div>
-                                <div class="description">test files for test</div>
-                                <div class="list">
-                                    <div class="item">
-                                        <i class="folder icon"></i>
-                                        <div class="content">
-                                            <div class="header">test2</div>
-                                            <div class="description">Test2 site's test</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
                         <#list allTags as tags>
                             <div class="item">
                                 <i class="icon ${tags.icon} ${tags.color}"></i>
                                 <div class="content">
                                     <a class="header" onclick="onTags(${tags.id})">${tags.name}</a>
                                     <div class="description">${tags.description}</div>
+
+                                    <div class="list">
+
+                                        <#list allChildTags as childTags>
+                                            <#if childTags.parentId == tags.id>
+                                                <div class="item">
+                                                    <i class="icon ${childTags.icon} ${childTags.color}"></i>
+                                                    <div class="content">
+                                                        <a class="header"
+                                                           onclick="onTags(${childTags.id})">${childTags.name}</a>
+                                                        <div class="description">${childTags.description}</div>
+                                                    </div>
+                                                </div>
+                                            </#if>
+                                        </#list>
+
+                                    </div>
+
+
                                 </div>
                             </div>
                         </#list>
@@ -295,7 +342,8 @@
                                         ${discussions.content}
                                     </div>
                                     <div class="meta">
-                                        <div class=" description "><i class="edit icon"></i> <a><b>${discussions.username}</b></a>&nbsp;&nbsp;•&nbsp;&nbsp;
+                                        <div class=" description "><i class="edit icon"></i>
+                                            <a><b>${discussions.username}</b></a>&nbsp;&nbsp;•&nbsp;&nbsp;
                                             <i class="reply icon"></i>最后由 <a><b>${discussions.usernameLast}</b></a>
                                             回复于${discussions.lastTime}.
                                         </div>
@@ -344,7 +392,8 @@
                                         ${discussions.content}
                                     </div>
                                     <div class="meta">
-                                        <div class=" description "><i class="edit icon"></i> <a><b>${discussions.username}</b></a>&nbsp;&nbsp;•&nbsp;&nbsp;
+                                        <div class=" description "><i class="edit icon"></i>
+                                            <a><b>${discussions.username}</b></a>&nbsp;&nbsp;•&nbsp;&nbsp;
                                             <i class="reply icon"></i>最后由 <a><b>${discussions.usernameLast}</b></a>
                                             回复于${discussions.lastTime}.
                                         </div>
@@ -392,7 +441,8 @@
                                         ${discussions.content}
                                     </div>
                                     <div class="meta">
-                                        <div class=" description "><i class="edit icon"></i> <a><b>${discussions.username}</b></a>&nbsp;&nbsp;•&nbsp;&nbsp;
+                                        <div class=" description "><i class="edit icon"></i>
+                                            <a><b>${discussions.username}</b></a>&nbsp;&nbsp;•&nbsp;&nbsp;
                                             <i class="reply icon"></i>最后由 <a><b>${discussions.usernameLast}</b></a>
                                             回复于${discussions.lastTime}.
                                         </div>

src/main/resources/templates/newdiccuss.ftl

@@ -57,6 +57,7 @@
     $(document).ready(function () {
         tinymce.init({
             selector: '#discussionsContent',
+            height: 280, // 高度
         });
     });
 

src/main/resources/templates/newtag.ftl

@@ -44,19 +44,58 @@
                         <i class="dropdown icon"></i>
                         <div class="default text">选择颜色</div>
                         <div class="menu">
-                        <div class="item" data-value="red"><div class="ui red empty circular label"></div>红色</div>
+                            <div class="item" data-value="red">
-                        <div class="item" data-value="orange"><div class="ui orange empty circular label"></div>橙色</div>
+                                <div class="ui red empty circular label"></div>
-                        <div class="item" data-value="yellow"><div class="ui yellow empty circular label"></div>黄色</div>
+                                红色
-                        <div class="item" data-value="olive"><div class="ui olive empty circular label"></div>橄榄绿</div>
+                            </div>
-                        <div class="item" data-value="green"><div class="ui green empty circular label"></div>纯绿</div>
+                            <div class="item" data-value="orange">
-                        <div class="item" data-value="teal"><div class="ui teal empty circular label"></div>水鸭蓝</div>
+                                <div class="ui orange empty circular label"></div>
-                        <div class="item" data-value="blue"><div class="ui blue empty circular label"></div>纯蓝</div>
+                                橙色
-                        <div class="item" data-value="violet"><div class="ui violet empty circular label"></div>紫罗兰</div>
+                            </div>
-                        <div class="item" data-value="purple"><div class="ui purple empty circular label"></div>纯紫</div>
+                            <div class="item" data-value="yellow">
-                        <div class="item" data-value="pink"><div class="ui pink empty circular label"></div>粉红</div>
+                                <div class="ui yellow empty circular label"></div>
-                        <div class="item" data-value="brown"><div class="ui brown empty circular label"></div>棕色</div>
+                                黄色
-                        <div class="item" data-value="grey"><div class="ui grey empty circular label"></div>灰色</div>
+                            </div>
-                        <div class="item" data-value="black"><div class="ui black empty circular label"></div>黑色</div>
+                            <div class="item" data-value="olive">
+                                <div class="ui olive empty circular label"></div>
+                                橄榄绿
+                            </div>
+                            <div class="item" data-value="green">
+                                <div class="ui green empty circular label"></div>
+                                纯绿
+                            </div>
+                            <div class="item" data-value="teal">
+                                <div class="ui teal empty circular label"></div>
+                                水鸭蓝
+                            </div>
+                            <div class="item" data-value="blue">
+                                <div class="ui blue empty circular label"></div>
+                                纯蓝
+                            </div>
+                            <div class="item" data-value="violet">
+                                <div class="ui violet empty circular label"></div>
+                                紫罗兰
+                            </div>
+                            <div class="item" data-value="purple">
+                                <div class="ui purple empty circular label"></div>
+                                纯紫
+                            </div>
+                            <div class="item" data-value="pink">
+                                <div class="ui pink empty circular label"></div>
+                                粉红
+                            </div>
+                            <div class="item" data-value="brown">
+                                <div class="ui brown empty circular label"></div>
+                                棕色
+                            </div>
+                            <div class="item" data-value="grey">
+                                <div class="ui grey empty circular label"></div>
+                                灰色
+                            </div>
+                            <div class="item" data-value="black">
+                                <div class="ui black empty circular label"></div>
+                                黑色
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -73,8 +112,12 @@
                             <div class="item" data-value="fax"><i class="fax"></i>fax</div>
                             <div class="item" data-value="bug"><i class="bug"></i>bug</div>
                             <div class="item" data-value="keyboard"><i class="keyboard"></i>keyboard</div>
-                        <div class="item" data-value="folder open outline"><i class="folder open outline"></i>folder open outline</div>
+                            <div class="item" data-value="folder open outline"><i class="folder open outline"></i>folder
-                        <div class="item" data-value="comment outline"><i class="comment outline"></i>comment outline</div>
+                                open outline
+                            </div>
+                            <div class="item" data-value="comment outline"><i class="comment outline"></i>comment
+                                outline
+                            </div>
                         </div>
                     </div>
                 </div>