commit

src/main/java/io/v/nutz/sys/controllers/platform/sys/SSLContextTrustAnyHostname.java

@@ -0,0 +1,44 @@
+package io.v.nutz.sys.controllers.platform.sys;
+
+import javax.net.ssl.*;
+import java.security.KeyManagementException;
+import java.security.NoSuchAlgorithmException;
+import java.security.SecureRandom;
+import java.security.cert.X509Certificate;
+
+public class SSLContextTrustAnyHostname {
+    public static void trustAllHosts() {
+        TrustManager[] trustAllCerts = new TrustManager[]{
+            new X509TrustManager() {
+                public X509Certificate[] getAcceptedIssuers() {
+                    return null;
+                }
+                public void checkClientTrusted(X509Certificate[] certs, String authType) {
+                }
+                public void checkServerTrusted(X509Certificate[] certs, String authType) {
+                }
+            }
+        };
+
+        SSLContext sc = null;
+        try {
+            sc = SSLContext.getInstance("SSL");
+        } catch (NoSuchAlgorithmException e) {
+            e.printStackTrace();
+        }
+        try {
+            sc.init(null, trustAllCerts, new SecureRandom());
+        } catch (KeyManagementException e) {
+            e.printStackTrace();
+        }
+        HttpsURLConnection.setDefaultSSLSocketFactory(sc.getSocketFactory());
+
+        // Create all-trusting host name verifier
+        HostnameVerifier allHostsValid = new HostnameVerifier() {
+            public boolean verify(String hostname, SSLSession session) {
+                return true;
+            }
+        };
+        HttpsURLConnection.setDefaultHostnameVerifier(allHostsValid);
+    }
+}

src/main/java/io/v/nutz/sys/controllers/platform/sys/SysHomeController.java

@@ -4,26 +4,41 @@ import cn.hutool.core.util.StrUtil;
 import cn.wizzer.framework.base.Result;
 import io.v.nutz.base.enums.Env;
 import io.v.nutz.base.service.BaseService;
+import io.v.nutz.sys.models.Sys_home_activity;
 import io.v.nutz.sys.models.Sys_menu;
 import io.v.nutz.sys.services.SysMenuService;
 import io.v.nutz.sys.services.SysUserService;
 import io.v.nutz.web.commons.base.Globals;
 import io.v.nutz.web.commons.utils.ShiroUtil;
+import io.v.nutz.zhgh.activity.models.ActivityUserScope;
 import org.apache.shiro.authz.annotation.RequiresAuthentication;
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.select.Elements;
+import org.nutz.dao.Cnd;
+import org.nutz.dao.Dao;
+import org.nutz.dao.FieldFilter;
 import org.nutz.dao.Sqls;
 import org.nutz.dao.sql.Sql;
+import org.nutz.dao.util.Daos;
+import org.nutz.integration.jedis.RedisService;
 import org.nutz.ioc.loader.annotation.Inject;
 import org.nutz.ioc.loader.annotation.IocBean;
+import org.nutz.json.Json;
 import org.nutz.lang.Lang;
 import org.nutz.lang.Strings;
+import org.nutz.lang.util.NutMap;
 import org.nutz.mvc.annotation.At;
 import org.nutz.mvc.annotation.Ok;
 import org.nutz.mvc.annotation.Param;
 
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpSession;
+import java.io.IOException;
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
 
 /**
  * Created by wizzer on 2016/6/23.
@@ -40,8 +55,14 @@ public class SysHomeController {
     @Inject
     private BaseService baseService;
 
+    @Inject
+    private Dao dao;
+
+    @Inject
+    private RedisService redisService;
+
     @At("")
-    @Ok("beetl:/platform/sys/home2.html")
+    @Ok("beetl:/platform/sys/home/index.html")
     @RequiresAuthentication
     public void home(HttpSession session, HttpServletRequest request) {
 
@@ -182,6 +203,44 @@ public class SysHomeController {
         return Result.success(baseService.listMap(sql));
     }
 
+    @At
+    @Ok("json:full")
+    @RequiresAuthentication
+    public Result listHomeActivity() {
+        FieldFilter fieldFilter = FieldFilter.locked(Sys_home_activity.class, "classPath");
+        List<Sys_home_activity> list = Daos.ext(dao, fieldFilter).query(Sys_home_activity.class, Cnd.where("enable", "=", 1).desc("top"));
+        String userId = ShiroUtil.getUserId();
+
+        List<Sys_home_activity> allowActivityList = new ArrayList<>();
+
+        for (Sys_home_activity activity : list) {
+            Integer allowUserGroupId = activity.getAllowUserGroupId();
+            String allowUserSql = activity.getAllowUserSql();
+            activity.setAllowUserSql(null);
+            if (allowUserGroupId == null && StrUtil.isBlank(allowUserSql)) {
+                allowActivityList.add(activity);
+                continue;
+            }
+
+            if (allowUserGroupId != null) {
+                int count = dao.count(ActivityUserScope.class, Cnd.where("groupId", "=", allowUserGroupId).and("userId", "=", userId));
+                if (count > 0) {
+                    allowActivityList.add(activity);
+                    continue;
+                }
+            }
+
+            if (StrUtil.isNotBlank(allowUserSql)) {
+                Sql sql = Sqls.create(allowUserSql).setParam("userId", userId);
+                NutMap nutMap = (NutMap) Daos.query(dao, sql.toString(), Sqls.callback.map());
+                if (Lang.isNotEmpty(nutMap)) {
+                    allowActivityList.add(activity);
+                }
+            }
+        }
+        return Result.success(allowActivityList);
+    }
+
 
     @At("/403")
     @Ok("re")
@@ -231,5 +290,77 @@ public class SysHomeController {
         return ">>:/error/AuthenticationError.html";
     }
 
+    /**
+     * 工会网站新闻
+     *
+     * @return
+     */
+    @At
+    @RequiresAuthentication
+    @Ok("json")
+    public Result getNews() {
+        try {
+//            String gonghuiNews = redisService.get("gonghui_news");
+//            if(Strings.isNotBlank(gonghuiNews)){
+//                List<HashMap> news = Json.fromJsonAsList(HashMap.class, gonghuiNews);
+//                return Result.success(news);
+//            }
+            SSLContextTrustAnyHostname.trustAllHosts();
+            String url = "https://gh.zufe.edu.cn/";
+            Document document = null;
+            document = Jsoup.connect(url).get();
+            Elements homeElements1 = document.select(".index .section1 .w12>div");
+            Elements homeElements2 = document.select(".index .section2 .w12>div");
+
+
+            List<Map<String, Object>> news1 = homeElements1.stream().map(homeElement -> {
+                //获取板块名称
+                String name = homeElement.selectFirst("div.tit>h2").text();
+                if (name.equals("新闻速递")) {
+                    Elements liElements = homeElement.select(".s1-r ul li");
+                    List<NutMap> notices = liElements.stream().map(liElement -> {
+                        NutMap row = NutMap.NEW();
+                        String href = liElement.selectFirst("a").attr("href");
+                        String time = liElement.selectFirst("a span").text();
+                        String title = liElement.selectFirst("a p").text();
+                        row.put("href", href);
+                        row.put("time", time);
+                        row.put("text", title);
+                        return row;
+                    }).collect(Collectors.toList());
+                    return Map.of("label", name, "value", notices);
+                }
+                return null;
+            }).collect(Collectors.toList());
+            List<Map<String, Object>> news2 = homeElements2.stream().map(homeElement -> {
+                //获取板块名称
+                String name = homeElement.selectFirst("div.tit>h2").text();
+                if (name.equals("通知公告")) {
+                    Elements liElements = homeElement.select(".s2-l ul li");
+                    List<NutMap> notices = liElements.stream().map(liElement -> {
+                        NutMap row = NutMap.NEW();
+                        String href = liElement.selectFirst("a").attr("href");
+                        String time1 = liElement.selectFirst("a .date b").text();
+                        String time2 = liElement.selectFirst("a .date span").text();
+                        String title = liElement.selectFirst("a .info h3").text();
+                        row.put("href", href);
+                        row.put("time", time2 + "-" + time1);
+                        row.put("text", title);
+                        return row;
+                    }).collect(Collectors.toList());
+                    return Map.of("label", name, "value", notices);
+                }
+                return null;
+            }).collect(Collectors.toList());
+            if (Lang.isNotEmpty(news2)) {
+                news1.addAll(news2);
+            }
+            redisService.setex("gonghui_news", 60 * 60 * 24, Json.toJson(news1));
+            return Result.success(news1);
+        } catch (IOException e) {
+            throw new RuntimeException(e);
+        }
+    }
+
 
 }

src/main/resources/views/platform/sys/home/activity.js

@@ -0,0 +1,66 @@
+const activity = {
+    template: /*language=HTML*/`
+        <div class="home-activity">
+            <el-card shadow="never">
+                <div class="card-title" slot="header">最新活动</div> 
+                <div v-if="activityOptions && activityOptions.length > 0" v-for="item in activityOptions" :key="item.id">
+                        <div style="width: 100%">
+                            <div style="background-color: #fff; position: relative; margin-bottom: 10px">
+                                <div style="display: flex; justify-content: center; align-items: center">
+                                    <el-image :src="CREATE_PREVIEW_URL(item.cover)" alt="" fit="fill" 
+                                    style="margin: 3px 14px 0 0; width: 100px; height: 70px; border-radius: 8px">
+                                        <div slot="error" class="image-slot">
+                                            <i class="el-icon-picture-outline"></i>
+                                        </div>
+                                    </el-image>
+                                    <div style="flex: 1">
+                                        <div style="line-height: 22px; color: #111">
+                                            <i class="el-icon-star-on" style="color: red; font-size: 17px"></i>{{item.name}}
+                                             <el-tag type="danger" v-if="moment(item.endDate).valueOf()<moment().valueOf()" size="mini">报名已结束</el-tag>
+                                        </div>
+                                        <div style="font-size: 12px; line-height: 20px; color: #999">开始时间：{{moment(item.startDate).format('YYYY-MM-DD HH:mm')}}</div>
+                                        <div style="font-size: 12px; line-height: 20px; color: #999">结束时间：{{moment(item.endDate).format('YYYY-MM-DD HH:mm')}}</div>
+                                    </div>
+                                    <div @click="enterActivity(item)">
+                                            <el-tag style="cursor: pointer">查看<i class="el-icon-s-promotion"></i></el-tag>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                </div>
+                <el-empty v-if="activityOptions.length === 0" description="暂无活动"></el-empty>
+            </el-card>
+            <open-qr-code :url="activityH5Url" ref="openQRCode"></open-qr-code>
+        </div>
+    `,
+    data() {
+        return {
+            activityOptions: [],
+            activityH5Url: null
+        }
+    },
+    components: {
+        "open-qr-code": httpVueLoader("/components/plugins/OpenQRCode.vue?v=" + new Date().getTime())
+    },
+    methods: {
+        listActivity() {
+            $.get("/platform/home/listHomeActivity").then((resp) => {
+                if (resp.code === 0) {
+                    this.activityOptions = resp.data
+                }
+            })
+        },
+        enterActivity(item) {
+            if (item.url) {
+                sublime.jumpPagePjax(item.url)
+            } else if (item.url) {
+                this.$refs.openQRCode.openCode(item.url, "该活动只支持手机端报名,请使用手机扫描二维码报名！")
+            } else {
+                this.$message.warning("该活动不支持")
+            }
+        }
+    },
+    created() {
+        this.listActivity()
+    }
+}

src/main/resources/views/platform/sys/home/appModule.js

@@ -0,0 +1,42 @@
+const appModule = {
+    template: `
+        <div class="home-app-module">
+            <el-card shadow="never">
+                <div class="card-title" slot="header">平台入口</div>
+                <div style="display: flex;gap: 20px;overflow-x: auto">
+                  <template v-for="item in entranceModules">
+                    <div :key="item.id" class="v-item-handle" @click="enterEntranceModules(item)" 
+                    :class="item.id===id?'appModuleCard':''">
+                      <el-image :src="CREATE_PREVIEW_URL(item.icon[0].id)" style="height: 50px;width: 50px;border-radius: 50%"></el-image>
+                      <span class="v-item-handle-label">
+                        {{ item.moduleName }}
+                      </span>
+                    </div>
+                  </template>
+                </div>
+            </el-card>
+        </div> 
+    `,
+    data() {
+        return {
+            id: ""
+        }
+    },
+    computed: {
+        entranceModules() {
+            return JSON.parse(window.sessionStorage.getItem("moduleMenus"))
+        }
+    },
+    methods: {
+        enterEntranceModules(item) {
+            headerApp.appModuleId = item.id
+            this.id = item.id
+            leftMenuApp.loadMenu(item.id)
+        }
+    },
+    created() {
+        setTimeout(() => {
+            this.id = headerApp.appModuleId
+        }, 500)
+    }
+}

src/main/resources/views/platform/sys/home/index.html

@@ -0,0 +1,368 @@
+<!--#
+layout("/layouts/platform.html"){
+#-->
+
+<!--公共css-->
+<style>
+    .el-card {
+        border-radius: 8px;
+    }
+
+    .image-slot {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background: #f5f7fa;
+        color: #909399;
+    }
+
+    .el-icon-picture-outline {
+        font-size: 30px;
+    }
+
+    .ele-body {
+        padding: 10px;
+    }
+
+    .el-card {
+        height: 100%;
+    }
+</style>
+
+<!--个人信息css-->
+<style>
+    .home-user-info .el-card {
+        width: 100%;
+        overflow: auto;
+    }
+
+    .home-user-info .info {
+        line-height: 40px;
+        color: black;
+    }
+</style>
+
+<!--待办css-->
+<style>
+    .home-todo{
+        background: #ffffff;
+        padding: 15px;
+        border-radius: 8px;
+        overflow-y: auto;
+    }
+
+    .home-todo .el-tabs {
+        height: 100%;
+    }
+
+    .home-todo .el-tabs__content {
+        height: calc(100% - 55px);
+        overflow-y: auto;
+    }
+
+</style>
+
+<!--快速入口css-->
+<style>
+    .home-quick-entry .el-card {
+        width: 100%;
+    }
+    .home-quick-entry .el-card .el-card__body{
+        overflow-x: auto;
+        overflow-y: auto;
+        height: calc(100% - 53.5px);
+    }
+
+
+    .home-quick-entry .quickEntries {
+        overflow-y: auto;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+        gap: 10px;
+    }
+
+    .home-quick-entry .quickEntries .quickEntryItem img {
+        max-width: 50px;
+    }
+
+    .home-quick-entry .quickEntries .quickEntryItem {
+        font-size: 16px;
+        height: 90px;
+        max-height: 90px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding: 10px;
+        transition: transform 0.3s ease-in-out,
+        box-shadow 0.3s ease-in-out;
+    }
+
+    .home-quick-entry .quickEntries .quickEntryItem span {
+        margin-top: auto;
+    }
+
+    .home-quick-entry .quickEntries .quickEntryItem:hover {
+        cursor: pointer;
+        background: #f3f3f3;
+        border-radius: 10px;
+    }
+
+    .home-quick-entry .quickEntries .quickEntryItem:hover {
+        animation: shake 0.3s;
+    }
+
+    @keyframes shake {
+        0% {
+            transform: translateX(0);
+        }
+        25% {
+            transform: translateX(-5px);
+        }
+        50% {
+            transform: translateX(5px);
+        }
+        75% {
+            transform: translateX(-5px);
+        }
+        100% {
+            transform: translateX(0);
+        }
+    }
+</style>
+
+<!--活动css-->
+<style>
+    .home-activity{
+        min-width: 500px;
+    }
+    .home-activity .el-card {
+        width: 100%;
+        overflow-y: auto;
+    }
+
+    .home-activity .el-empty {
+        padding: 40px 0 !important;
+    }
+</style>
+
+<!--平台入口css-->
+<style>
+    .home-app-module .el-card {
+        width: 100%;
+    }
+    .home-app-module .el-card .el-card__body{
+        overflow-x: auto;
+        overflow-y: auto;
+        height: calc(100% - 53.5px);
+    }
+
+    .v-item-handle {
+        width: 120px;
+        height: 100px;
+        border: 1px solid #f3efef;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        transition: all 500ms;
+        color: #0779e4;
+        cursor: pointer;
+        border-radius: 5px;
+        flex: 0 0 auto;
+        margin-bottom: 10px;
+    }
+
+    .v-item-handle-label {
+        font-size: 14px;
+        margin-top: 5px;
+    }
+
+    .v-item-handle .el-image {
+        transition: width 0.3s ease,
+        height 0.3s ease;
+        transform-origin: center; /* 缩放的中心点 */
+    }
+
+    .v-item-handle:hover .el-image {
+        width: 60px !important;
+        height: 60px !important;
+    }
+
+    .v-item-handle:hover .fa {
+        color: white !important;
+    }
+
+    .v-item-handle span {
+        transition: all 500ms;
+        color: #000;
+        font-size: 16px;
+    }
+    .appModuleCard {
+        border: 3px solid #409EFF;
+    }
+</style>
+
+<!--工会新闻css-->
+<style>
+    .home-news {
+        background: #ffffff;
+        padding: 15px;
+        border-radius: 8px;
+        overflow-y: auto;
+    }
+
+    .home-news .el-tabs {
+        height: 100%;
+    }
+
+    .home-news .el-tabs__content {
+        height: calc(100% - 55px);
+        overflow-y: auto;
+    }
+
+    .home-news .el-tab-pane {
+        line-height: 38px;
+        color: black;
+    }
+
+    .home-news .el-tab-pane .news_time {
+        color: white;
+        padding: 4px 10px;
+        border-radius: 10px;
+        background: #1867b0;
+    }
+
+    .home-news .el-tab-pane div {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        cursor: pointer;
+        height: 50px;
+        line-height: 50px;
+    }
+
+    .home-news .el-tab-pane .news_text:hover {
+        color: #1867b0;
+    }
+</style>
+
+<style>
+    .layout-grid-container{
+        display: grid;
+        grid-template-columns: repeat(3, minmax(100px, 1fr));
+        grid-template-rows: 220px 255px auto;
+        gap: 10px;
+        width: calc(100% - 20px);
+        height: calc(100% - 20px);
+        margin: 10px auto;
+        overflow: hidden;
+        box-sizing: border-box;
+    }
+    .layout-grid-container .grid-item {
+        color: white;
+        border-radius: 8px;
+    }
+
+    .appModule-grid {
+        grid-column: 1 / 3; /* 元素1占据第1和第2列 */
+        grid-row: 1 / 2;    /* 元素1占据第1行 */
+    }
+
+    .activity-grid {
+        grid-column: 3 / 4; /* 元素2占据第3列 */
+        grid-row: 1 / 3;    /* 元素2跨越第1和第2行 */
+    }
+
+    .quickEntry-grid {
+        grid-column: 1 / 3; /* 元素3占据第1和第2列 */
+        grid-row: 2 / 3;    /* 元素3占据第2行 */
+    }
+
+    .news-grid,
+    .todo-grid,
+    .user-grid {
+        grid-column: span 1; /* 每个元素占据1列 */
+        grid-row: 3 / 4;     /* 所有元素都在第3行 */
+    }
+
+</style>
+
+<div id="app" v-cloak>
+    <div class="layout-grid-container">
+        <app-module class="appModule-grid grid-item"></app-module>
+        <quick-entry class="quickEntry-grid grid-item"></quick-entry>
+        <activity class="activity-grid grid-item"></activity>
+        <news class="news-grid grid-item"></news>
+        <todo class="todo-grid grid-item"></todo>
+        <user-info class="user-grid grid-item"></user-info>
+    </div>
+</div>
+<script>
+    <!--#include("userInfo.js"){}#-->
+    <!--#include("todo.js"){}#-->
+    <!--#include("quickEntry.js"){}#-->
+    <!--#include("activity.js"){}#-->
+    <!--#include("appModule.js"){}#-->
+        <!--#include("news.js"){}#-->
+
+        new Vue({
+        el: "#app",
+        components: {
+            "user-info": userInfo,
+            todo,
+            "quick-entry": quickEntry,
+            activity,
+            "app-module": appModule,
+            news: news
+        },
+        data: function () {
+            return {
+                quickEntries: [],
+                activityOptions: [],
+                processInstanceOptions: [],
+
+                icon: "alipay"
+            }
+        },
+        methods: {
+            listQuickEntry() {
+                $.post("/platform/home/listQuickEntry").then((res) => {
+                    if (res.code === 0) {
+                        this.quickEntries = res.data
+                    }
+                })
+            },
+            listActivity() {
+                $.post("/platform/h5/listHomeActivity").then((resp) => {
+                    if (resp.code === 0) {
+                        this.activityOptions = resp.data
+                    }
+                })
+            },
+            enterActivity(item) {
+                // this.$store.dispatch("pjaxRoute", item.url)
+            },
+
+            //查询流程实例
+            listProcessInstance() {
+                $.post("/platform/wf/processInstance/page", {
+                    pageNumber: 1,
+                    pageSize: 10
+                })
+                    .then((resp) => {
+                        if (resp.code === 0) {
+                            this.processInstanceOptions = resp.data.list
+                        }
+                    })
+            }
+        },
+        created() {
+        }
+    })
+</script>
+<style scoped></style>
+
+<!--# } #-->

src/main/resources/views/platform/sys/home/news.js

@@ -0,0 +1,39 @@
+const news = {
+    template: `
+        <div class="home-news">
+            <el-tabs v-model="activeName">
+                <el-tab-pane v-for="(item,index) in newsData" :key="index" :label="item.label" :name="item.label" v-if="item.value.length > 0">
+                    <div v-for="(n,i) in item.value" :key="i" @click="openUrl(n.href)">
+                        <span v-if="n.time" class="news_time">{{ n.time }}</span>
+                        <span class="news_text">{{ n.text }}</span>
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+        </div> 
+    `,
+    data() {
+        return {
+            newsData: [],
+            activeName: 0
+        }
+    },
+    methods: {
+        async getNews() {
+            const resp = await $.post("/platform/home/getNews")
+            if (resp.data.length > 0) {
+                this.activeName = resp.data[0].label
+            }
+            this.newsData = resp.data
+        },
+        openUrl(href) {
+            const url = this.isHttpOrHttps(href) ? href : "https://gh.zufe.edu.cn/" + href
+            window.open(url)
+        },
+        isHttpOrHttps(url) {
+            return /^(http:\/\/|https:\/\/)/i.test(url)
+        }
+    },
+    async created() {
+        await this.getNews()
+    }
+}

src/main/resources/views/platform/sys/home/quickEntry.js

@@ -0,0 +1,39 @@
+const quickEntry = {
+    template: `
+        <div class="home-quick-entry">
+            <el-card shadow="never">
+                <div class="card-title" slot="header">快速入口</div>
+                    <div class="quickEntries">
+                        <div v-for="item in quickEntries" :key="item.id" @click="menuClick(item)" class="quickEntryItem">
+                            <el-image :src="CREATE_PREVIEW_URL(item.iconClass)" alt="">
+                                <div class="image-slot" slot="error">
+                                    <i class="el-icon-picture-outline"></i>
+                                </div>
+                            </el-image>
+                            <span>{{item.name}}</span>
+                        </div>
+                    </div>
+            </el-card>
+        </div> 
+    `,
+    data() {
+        return {
+            quickEntries: []
+        }
+    },
+    methods: {
+        listQuickEntry() {
+            $.get("/platform/quickEntry/getQuickentry").then((res) => {
+                if (res.code === 0) {
+                    this.quickEntries = res.data
+                }
+            })
+        },
+        menuClick(item){
+            sublime.jumpPagePjax(item.href)
+        }
+    },
+    created() {
+        this.listQuickEntry()
+    }
+}

src/main/resources/views/platform/sys/home/test.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>CSS Grid 布局示例</title>
+    <style>
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr); /* 定义3列，每列宽度相等 */
+            grid-template-rows: repeat(3, 100px);  /* 定义3行，每行高度为100px */
+            gap: 10px; /* 设置网格间距 */
+            width: 600px; /* 容器宽度 */
+            height: 400px; /* 容器高度 */
+            margin: 0 auto; /* 居中容器 */
+        }
+
+        .item {
+            background-color: #4CAF50;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2em;
+            border-radius: 5px;
+        }
+
+        .item1 {
+            grid-column: 1 / 3; /* 元素1占据第1和第2列 */
+            grid-row: 1 / 2;    /* 元素1占据第1行 */
+        }
+
+        .item2 {
+            grid-column: 3 / 4; /* 元素2占据第3列 */
+            grid-row: 1 / 3;    /* 元素2跨越第1和第2行 */
+        }
+
+        .item3 {
+            grid-column: 1 / 3; /* 元素3占据第1和第2列 */
+            grid-row: 2 / 3;    /* 元素3占据第2行 */
+        }
+
+        .item4,
+        .item5,
+        .item6 {
+            grid-column: span 1; /* 每个元素占据1列 */
+            grid-row: 3 / 4;     /* 所有元素都在第3行 */
+        }
+    </style>
+</head>
+<body>
+<div class="grid-container">
+    <div class="item item1">元素 1</div>
+    <div class="item item2">元素 2</div>
+    <div class="item item3">元素 3</div>
+    <div class="item item4">元素 4</div>
+    <div class="item item5">元素 5</div>
+    <div class="item item6">元素 6</div>
+</div>
+</body>
+</html>

src/main/resources/views/platform/sys/home/todo.js

@@ -0,0 +1,100 @@
+const todo = {
+    template: `
+         <div class="home-todo">
+            <el-tabs v-model="todoActive " @tab-click="handleClick">
+                <el-tab-pane label="待处理" name="1">
+                    <el-table :data="todoList" v-loading="todoLoading">
+                        <el-table-column label="序号" type="index" width="70"></el-table-column>
+                        <el-table-column label="标题" prop="processName" show-overflow-tooltip
+                                         width="200"></el-table-column>
+                        <el-table-column label="发起人" prop="createdByUserName"
+                                         width="140"></el-table-column>
+                        <el-table-column label="发起时间" prop="createdOn" v-if="todoActive==='3'"
+                                         width="150"></el-table-column>
+                        <el-table-column label="我的处理环节" prop="taskNodeName"
+                                         v-if="todoActive!=='3'"></el-table-column>
+                        <el-table-column label="流程流转环节" prop="nodeName"></el-table-column>
+                        <el-table-column label="操作" width="100">
+                            <template scope="{row}">
+                                <el-button @click="sublime.jumpPagePjax(row.formUrl)" size="mini" type="primary">查看</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-tab-pane>
+                <el-tab-pane label="已处理" name="2">
+                    <el-table :data="todoList" v-loading="todoLoading">
+                        <el-table-column label="序号" type="index" width="70"></el-table-column>
+                        <el-table-column label="标题" prop="processName" show-overflow-tooltip
+                                         width="200"></el-table-column>
+                        <el-table-column label="发起人" prop="createdByUserName"
+                                         width="140"></el-table-column>
+                        <el-table-column label="发起时间" prop="createdOn" v-if="todoActive==='3'"
+                                         width="150"></el-table-column>
+                        <el-table-column label="我的处理环节" prop="taskNodeName"
+                                         v-if="todoActive!=='3'"></el-table-column>
+                        <el-table-column label="流程流转环节" prop="nodeName"></el-table-column>
+                        <el-table-column label="操作" width="100">
+                            <template scope="{row}">
+                                <el-button @click="sublime.jumpPagePjax(row.formUrl)" size="mini" type="primary">查看</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-tab-pane>
+                <el-tab-pane label="我的发起" name="3">
+                    <el-table :data="todoList" v-loading="todoLoading">
+                        <el-table-column label="序号" type="index" width="70"></el-table-column>
+                        <el-table-column label="标题" prop="processName" show-overflow-tooltip
+                                         width="200"></el-table-column>
+                        <el-table-column label="发起人" prop="createdByUserName"
+                                         width="140"></el-table-column>
+                        <el-table-column label="发起时间" prop="createdOn" v-if="todoActive==='3'"
+                                         width="150"></el-table-column>
+                        <el-table-column label="我的处理环节" prop="taskNodeName"
+                                         v-if="todoActive!=='3'"></el-table-column>
+                        <el-table-column label="流程流转环节" prop="nodeName"></el-table-column>
+                        <el-table-column label="操作" width="100">
+                            <template scope="{row}">
+                                <el-button @click="sublime.jumpPagePjax(row.formUrl)" size="mini" type="primary">查看</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-tab-pane>
+            </el-tabs>
+<!--            <el-table :data="todoList" style="min-height: 250px" v-loading="todoLoading">-->
+<!--                    <el-table-column label="序号" type="index" width="70"></el-table-column>-->
+<!--                    <el-table-column label="标题" prop="processName" show-overflow-tooltip-->
+<!--                                     width="200"></el-table-column>-->
+<!--                    <el-table-column label="发起人" prop="createdByUserName"-->
+<!--                                     width="140"></el-table-column>-->
+<!--                    <el-table-column label="发起时间" prop="createdOn" v-if="todoActive==='3'"-->
+<!--                                     width="150"></el-table-column>-->
+<!--                    <el-table-column label="我的处理环节" prop="taskNodeName"-->
+<!--                                     v-if="todoActive!=='3'"></el-table-column>-->
+<!--                    <el-table-column label="流程流转环节" prop="nodeName"></el-table-column>-->
+<!--                    <el-table-column label="操作" width="100">-->
+<!--                        <template scope="{row}">-->
+<!--                            <el-button @click="sublime.jumpPagePjax(row.formUrl)" size="mini" type="primary">查看</el-button>-->
+<!--                        </template>-->
+<!--                    </el-table-column>-->
+<!--            </el-table>-->
+         </div>
+    `,
+    mixins: [initTableMixins],
+    data() {
+        return {
+            todoActive: "1",
+            todoList:[]
+        }
+    },
+    methods: {
+        async handleClick() {
+            this.todoLoading = true
+            const {data, code} = await $.get("/platform/sys/localProcess/todoList", { mode: this.todoActive })
+            this.todoList = data
+            this.todoLoading = false
+        }
+    },
+    created() {
+        this.handleClick()
+    }
+}

src/main/resources/views/platform/sys/home/userInfo.js

@@ -0,0 +1,67 @@
+const userInfo = {
+    template: `
+        <div class="home-user-info">
+            <el-card shadow="never">
+                <div class="card-title" slot="header">个人信息</div>
+                <div class="info">
+                     <div>👨‍🏫我的姓名：${@shiro.getPrincipalProperty('username')}</div>
+                     <div>🆔我的工号：${@shiro.getPrincipalProperty('loginname')}</div>
+                     <div>⭕我的性别：${@shiro.getPrincipalProperty('sex')}</div>
+                     <div>🟢我的单位：${@shiro.getPrincipalProperty('unit').getName()}</div>
+                     <div>🟤我的工会：${@shiro.getPrincipalProperty('union').getUnionname()}</div>
+                     <div>📕系统角色：
+                      <!--#for(role in @shiro.getPrincipalProperty('roles')){#-->
+                         <span style="font-size: 14px;color: #666;">${@role.getName()}</span>
+                       <!--#}#-->
+                     </div>
+                </div>
+            </el-card>
+            
+            <el-dialog :visible.sync="signatureDialogVisible" title="我的签字" width="35%">
+<!--                 <div class="flx">-->
+<!--                    <div v-if="!showSignature" class="p10">-->
+<!--                        <el-image style="width: 100%;border: 1px dashed #000" :src="userSignatureUrl" v-if="userSignatureUrl">-->
+<!--                            <template slot="error">获取签名失败</template>-->
+<!--                        </el-image>-->
+<!--                        <el-empty v-else description="暂无签名"></el-empty>-->
+<!--                    </div>-->
+<!--                    <div class="flx-center-center" style="flex-direction: column;">-->
+<!--                        <qrcode :options="{ width: 126 }" :value="signatureAddress" class="signature-qrcode"></qrcode>-->
+<!--                        <el-button icon="el-icon-refresh" size="small" type="primary" @click="getUserSignature(true)">刷新</el-button>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                <el-alert title="扫描二维码可重新签名，手机上签名成功后可点击刷新查看。" type="success"></el-alert>-->
+            </el-dialog>
+        </div>  
+    `,
+    data() {
+        return {
+            showSignature: false,
+            userSignatureUrl: null,
+            signatureDialogVisible: false,
+            signatureAddress: window.location.origin + "/platform/signature/scanPcCode?origin=user",
+            memberInfoDialogVisible:false
+        }
+    },
+    mounted() {},
+    methods: {
+        openSignature() {
+            this.signatureDialogVisible = true
+            this.getUserSignature()
+        },
+        getUserSignature(isRefresh = false) {
+            $.post("/platform/signature/get").then((res) => {
+                if (res.code === 0) {
+                    if (isRefresh) {
+                        this.$message.success("刷新成功")
+                    } else {
+                        if (!res.data.signature) {
+                            this.$message.warning("未获取到签字信息")
+                        }
+                    }
+                    this.userSignatureUrl = res.data.signature
+                }
+            })
+        },
+    }
+}