@jx3box/jx3box-ui 2.0.6 → 2.0.7

package/.storybook/storybookMocks.js

@@ -7,6 +7,9 @@ import {
     mockCommentPower,
     mockCreators,
     mockHonor,
+    mockWikiComments,
+    mockWikiRevisions,
+    mockWikiStat,
     mockMedals,
     mockSearchUser,
     mockTeams,
@@ -117,6 +120,18 @@ export function resolveStorybookMock(config) {
         return respond(config, { data: mockBoxcoinRecords });
     }
 
+    if (method === 'get' && path.match(/^\/api\/summary-any\/.+\/stat$/)) {
+        return respond(config, { data: mockWikiStat, status: 200 });
+    }
+
+    if (method === 'get' && path === '/api/cms/wiki/comment') {
+        return respond(config, { data: mockWikiComments });
+    }
+
+    if (method === 'get' && path.match(/^\/api\/cms\/wiki\/post\/type\/.+\/source\/.+\/versions$/)) {
+        return respond(config, { data: mockWikiRevisions });
+    }
+
     if (method === 'get' && path.match(/^\/api\/next2\/comment\/.+\/i-am-author$/)) {
         return respond(config, mockCommentPower);
     }
@@ -154,6 +169,14 @@ export function resolveStorybookMock(config) {
         return respond(config, { code: 0, data: {} });
     }
 
+    if (['post', 'put', 'delete'].includes(method) && path.startsWith('/api/cms/wiki/comment')) {
+        return respond(config, { code: 0, data: {} });
+    }
+
+    if (method === 'put' && path.match(/^\/api\/cms\/manage\/wiki\/comment\/\d+\/(star|top)$/)) {
+        return respond(config, { code: 0, data: {} });
+    }
+
     if (['post', 'delete'].includes(method) && path.startsWith('/api/next2/rss/')) {
         return respond(config, { code: 0, data: { subscribed: method === 'post' } });
     }

package/README.md

@@ -6,45 +6,54 @@
 ## 模块
 
 ### 全局
-- CommonHeader 公共头
-- Breadcrumb 面包屑
-- Main 默认内容框架（非必须）
-- LeftSidebar 左侧边栏（非必须）
-- LeftSideToggle 左侧边栏触发器（非必须，可独立使用）
-- RightSidebar 右侧边栏（非必须）
-- CommonFooter 公共底
-- SuspendCommon 移动侧浮窗底（此组件需要手动引入）
+
+-   CommonHeader 公共头
+-   Breadcrumb 面包屑
+-   Main 默认内容框架（非必须）
+-   LeftSidebar 左侧边栏（非必须）
+-   LeftSideToggle 左侧边栏触发器（非必须，可独立使用）
+-   RightSidebar 右侧边栏（非必须）
+-   CommonFooter 公共底
+-   SuspendCommon 移动侧浮窗底（此组件需要手动引入）
 
 ### 内容单页 single
 
 主要是用于详情页的展示内容
 
-- CmsSingle 单页框架
-- Author 侧边栏作者信息整合
-- PostDirectory 目录
-- PostHeader 创作信息
-- Creators 联合创作
-- Collection 小册
-- Thx 交互组件
-- SimpleThx 交互组件简化版（仅PVP栏目使用，需要手动引入）
-- Comment 评论
-- RightAffix 固钉
-- PostGuide 快速跳转至上下篇
-- PostVersion 修改历史
-- PostCollection 关联小册
+-   CmsSingle 单页框架
+-   Author 侧边栏作者信息整合
+-   PostDirectory 目录
+-   PostHeader 创作信息
+-   Creators 联合创作
+-   Collection 小册
+-   Thx 交互组件
+-   SimpleThx 交互组件简化版（仅 PVP 栏目使用，需要手动引入）
+-   Comment 评论
+-   RightAffix 固钉
+-   PostGuide 快速跳转至上下篇
+-   PostVersion 修改历史
+-   PostCollection 关联小册
 
 ### 筛选模块 list
 
 主要用于各栏目的列表筛选
 
-- clientBy 客户端筛选
-- markBy 标记筛选
-- menuBy 通用筛选
-- orderBy 排序筛选
-- tagBy 标签筛选
-- topicBy 主题筛选
-- versionBy 版本筛选
-- zlpBy 资料片筛选
+-   clientBy 客户端筛选
+-   markBy 标记筛选
+-   menuBy 通用筛选
+-   orderBy 排序筛选
+-   tagBy 标签筛选
+-   topicBy 主题筛选
+-   versionBy 版本筛选
+-   zlpBy 资料片筛选
+
+### 百科模块 wiki
+
+-   GamePrice 游戏价格组件
+-   WikiPanel 百科面板
+-   WikiComments 百科评论
+-   WikiRevisions 百科修订
 
 ### 其他
-- UserPop 搜索用户弹窗
+
+-   UserPop 搜索用户弹窗

package/assets/css/interact/qrcode.less

@@ -0,0 +1,69 @@
+.w-qrcode {
+    display: inline-flex;
+    align-items: center;
+    .pr;
+    z-index: 200;
+    width: fit-content;
+    white-space: nowrap;
+    .u-icon {
+        .mr(5px);
+        .size(14px);
+        .y(-2px);
+        fill: @color;
+    }
+    .u-text {
+        .fz(13px);
+        user-select: none;
+    }
+    .pointer;
+    transition: 0.1s ease-in-out;
+    &:hover {
+        color: @pink;
+        .u-icon {
+            fill: @pink;
+        }
+    }
+
+    .u-pic {
+        .size(100px);
+        .mb(5px);
+    }
+}
+.u-qrcode-popup {
+    position: fixed;
+    transform: translateX(-50%);
+    padding: 10px;
+    border: 1px solid #e8e8e8;
+    z-index: 9999;
+    background: #fff;
+    border-radius: 3px;
+    font-size: 12px;
+    text-align: center;
+    color: #888;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+}
+@media screen and (max-width: @phone) {
+    .w-qrcode {
+        .none;
+    }
+}
+.w-qrcode-static {
+    .u-qrcode {
+        .ps;
+    }
+    .u-icon {
+        .mr(5px);
+        .size(14px);
+        .y(-2px);
+        fill: @color;
+    }
+    .u-pic {
+        background-color: #fff;
+        padding: 7px 7px 7px 8px;
+    }
+    .u-txt {
+        padding: 0 5px;
+        .db;
+        .fz(12px,2);
+    }
+}

package/assets/css/wiki/wiki-comments.less

@@ -0,0 +1,176 @@
+.c-wiki-comments {
+    .u-empty {
+        padding: 5px 0;
+        text-align: center;
+    }
+
+    .el-button {
+        user-select: none;
+
+        &.el-button--default:focus,
+        &.el-button--default:active {
+            background: white;
+            border: 1px solid #dcdfe6;
+        }
+
+        &.el-button--primary:focus,
+        &.el-button--primary:active {
+            background-color: #0366d6;
+            border-color: #0366d6;
+        }
+    }
+
+    .u-pagination-box {
+        margin-top: 12px;
+    }
+
+    .m-comments-panel {
+        font-size: 14px;
+
+        .u-comments {
+            padding-left: 0;
+            list-style: none;
+        }
+
+        .u-nickname-panel {
+            .u-nickname {
+                font-weight: 600;
+                color: #666666;
+            }
+
+            .u-nickname[href] {
+                color: blueviolet;
+            }
+
+            span + .u-nickname {
+                opacity: 0.7;
+            }
+        }
+
+        .u-comment {
+            padding: 5px 0;
+            border-bottom: 1px solid #eeeeee;
+            overflow: hidden;
+        }
+
+        .u-mark {
+            font-style: normal;
+            font-size: 12px;
+            padding: 2px 5px;
+            border-radius: 2px;
+            color: #fff;
+            margin-left: 5px;
+            cursor: default;
+            display: inline-flex;
+            align-items: center;
+            height: 21px;
+            box-sizing: border-box;
+        }
+        .u-top {
+            background-color: #6f42c1;
+            i {
+                transform: rotate(180deg);
+            }
+        }
+        .u-star {
+            background-color: #fba524;
+            i {
+                margin-right: 2px;
+            }
+        }
+
+        .u-content {
+            margin: 10px 0;
+            opacity: 0.8;
+        }
+
+        .m-reply {
+            padding-bottom: 10px;
+
+            .u-reply {
+                font-size: 13px;
+                padding: 6px 10px;
+            }
+
+            .u-time {
+                float: right;
+                margin-top: 5px;
+                font-size: 12px;
+                opacity: 0.5;
+            }
+        }
+
+        & > .u-comments {
+            margin: 0;
+            padding: 0;
+        }
+
+        & > .u-comments > .u-comment-panel > .u-comments {
+            padding-left: 15px;
+        }
+    }
+
+    // 回复表单样式
+    .m-reply-form {
+        overflow: hidden;
+
+        @border-style: 1px solid #cccccc;
+
+        .u-title {
+            .mt(15px);
+            .mb(10px);
+            .pb(10px);
+            color: #666666;
+            border-bottom: @border-style;
+
+            i,
+            span {
+                .dbi;
+                .mr(5px);
+                vertical-align: middle;
+                font-size: 16px;
+            }
+        }
+
+        .u-reply-content {
+            width: 100%;
+            height: 4em;
+            padding: 5px;
+            line-height: 1.5em;
+            box-sizing: border-box;
+            border: @border-style;
+            resize: vertical;
+            .r(3px);
+        }
+
+        .u-author {
+            .fl;
+
+            input {
+                .fz(14px, 28px);
+                .h(28px);
+                border: @border-style;
+                .r(3px);
+                padding: 0 5px;
+            }
+        }
+
+        .u-submit {
+            .fr;
+            padding: 7px 16px;
+        }
+    }
+
+    @media screen and (max-width: 360px) {
+        .m-reply-form {
+            .u-author,
+            .u-submit {
+                float: none;
+            }
+
+            .u-submit {
+                .mt(5px);
+            }
+        }
+    }
+}

package/assets/css/wiki/wiki-panel.less

@@ -0,0 +1,177 @@
+.c-wiki-panel {
+    .db;
+    .mb(15px);
+    background-color: #fafbfc;
+    border: 1px solid #eeeeee;
+    border-radius: 5px;
+    font-size: 14px;
+
+    img {
+        height: auto;
+    }
+
+    b,
+    strong {
+        font-weight: bold;
+    }
+
+    &.border-none {
+        background-color: transparent;
+        border: none;
+
+        .m-panel-head {
+            background-color: transparent;
+        }
+    }
+
+    .m-panel-head {
+        .pr;
+        padding: 0 15px;
+        background-color: #f5f7fa;
+        border-bottom: 1px solid #eeeeee;
+
+        & .m-panel-actions {
+            .pa;
+            right: 15px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 12px;
+            z-index: 30;
+
+            .u-more,
+            .el-button {
+                .dbi;
+                .ml(15px);
+
+                &:first-child {
+                    .ml(0);
+                }
+            }
+
+            .u-more {
+                color: @color-link;
+            }
+
+            .el-button {
+                padding: 7px 10px 9px;
+                font-size: 12px;
+            }
+        }
+
+        & .m-panel-title {
+            padding: 10px 0;
+            color: #6c645c;
+            margin: 0;
+            font-weight: 500;
+        }
+    }
+
+    .m-panel-body {
+        padding: 15px;
+        line-height: 1.6em;
+        word-break: break-all;
+    }
+
+    .m-wiki-metas {
+        .mb(5px);
+        font-size: 12px;
+
+        .u-meta,
+        .u-label,
+        .u-value {
+            .dbi;
+            vertical-align: middle;
+        }
+
+        .u-meta {
+            .mr(15px);
+            .mt(5px);
+
+            &:last-child {
+                .mr(0);
+            }
+
+            @media screen and (max-width: @phone) {
+                .db;
+                .mr(0);
+                .mb(5px);
+
+                &:last-child {
+                    .mb(0);
+                }
+            }
+        }
+
+        .u-label {
+            .mr(10px);
+            padding: 3px 8px;
+            background-color: #f2f2f2;
+            .r(2px);
+            font-style: normal;
+            color: #666;
+        }
+
+        .el-icon-star-on {
+            color: yellowgreen;
+            font-size: 16px;
+        }
+
+        .u-creator {
+            .dbi;
+            .w(24px);
+            .h(24px);
+            .mr(5px);
+            .r(50%);
+            overflow: hidden;
+
+            &:last-child {
+                .mr(0);
+            }
+
+            img {
+                .w(100%);
+                .h(auto);
+            }
+        }
+
+        @media screen and (max-width: @phone) {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    // 详情场景
+    &.m-detail-scene {
+        .m-panel-title {
+            img,
+            svg,
+            i,
+            span {
+                .dbi;
+                vertical-align: middle;
+            }
+
+            img,
+            svg,
+            i {
+                width: 28px;
+                height: 28px;
+                line-height: 28px;
+                color: @color-link;
+                fill: @color-link;
+                font-size: 22px;
+            }
+
+            img,
+            svg {
+                .mr(7px);
+            }
+
+            span {
+                font-size: 17px;
+                font-weight: 300;
+            }
+        }
+    }
+}

package/assets/css/wiki/wiki-revisions.less

@@ -0,0 +1,62 @@
+.c-wiki-revisions {
+  .u-empty {
+    padding: 5px 0;
+    text-align: center
+  }
+
+  .m-histories {
+    width: 100%;
+    margin: -5px 0;
+    opacity: 0.8;
+    font-size: 14px;
+    text-align: left;
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    th,
+    td {
+      min-width: 100px;
+      padding: 8px 10px;
+      font-weight: normal;
+      line-height: 1.6;
+
+      &:first-child{
+        min-width: 35px;
+      }
+
+      @media screen and (max-width: @phone) {
+        min-width: 35px;
+        padding: 3px;
+        font-size: 12px;
+
+        &:first-child{
+          min-width: 15px;
+        }
+      }
+    }
+
+    a {
+      color: @color;
+
+      &[href] {
+        color: @color-link;
+
+        &:hover {
+          box-shadow: 0 1px 0 @color-link;
+        }
+      }
+    }
+
+    th {
+      border-bottom: 2px solid #dddddd;
+    }
+
+    td {
+      border-bottom: 1px solid #dddddd;
+    }
+
+    tr:last-child td {
+      border-bottom: none;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.0.6",
+    "version": "2.0.7",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {