|
|
@@ -17,7 +17,6 @@
|
|
|
--text: #151515;
|
|
|
--muted: #aaaaaa;
|
|
|
--orange: #f47d1f;
|
|
|
- --safe-top: env(safe-area-inset-top, 0px);
|
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
|
}
|
|
|
|
|
|
@@ -39,57 +38,6 @@
|
|
|
padding-bottom: calc(92px + var(--safe-bottom));
|
|
|
}
|
|
|
|
|
|
- .nav {
|
|
|
- position: sticky;
|
|
|
- top: 0;
|
|
|
- z-index: 10;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 10px 12px;
|
|
|
- padding-top: calc(10px + var(--safe-top));
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .nav__close {
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- border: none;
|
|
|
- background: transparent;
|
|
|
- font-size: 22px;
|
|
|
- line-height: 36px;
|
|
|
- color: #151515;
|
|
|
- flex-shrink: 0;
|
|
|
- cursor: pointer;
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .nav__center {
|
|
|
- flex: 1;
|
|
|
- min-width: 0;
|
|
|
- text-align: center;
|
|
|
- padding: 0 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .nav__title {
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
- color: #151515;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- .nav__url {
|
|
|
- margin-top: 2px;
|
|
|
- font-size: 11px;
|
|
|
- color: var(--muted);
|
|
|
- }
|
|
|
-
|
|
|
- .nav__side {
|
|
|
- width: 36px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
.hero {
|
|
|
padding: 16px 15px 0;
|
|
|
}
|
|
|
@@ -116,10 +64,12 @@
|
|
|
|
|
|
.conversation {
|
|
|
padding: 14px 15px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.row {
|
|
|
display: flex;
|
|
|
+ width: 100%;
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
|
|
|
@@ -132,39 +82,67 @@
|
|
|
}
|
|
|
|
|
|
.user-bubble {
|
|
|
+ position: relative;
|
|
|
max-width: 78%;
|
|
|
padding: 10px 12px;
|
|
|
- background: var(--orange);
|
|
|
- border-radius: 11px;
|
|
|
- color: #fff;
|
|
|
+ background: #f47d1f;
|
|
|
+ border-radius: 6px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-bubble::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ right: -5px;
|
|
|
+ bottom: 10px;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 5px 0 5px 6px;
|
|
|
+ border-color: transparent transparent transparent #f47d1f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-bubble__text {
|
|
|
font-size: 15px;
|
|
|
font-weight: 500;
|
|
|
- line-height: 1.47;
|
|
|
- white-space: pre-wrap;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 22px;
|
|
|
word-break: break-word;
|
|
|
+ white-space: pre-wrap;
|
|
|
}
|
|
|
|
|
|
.ai-card {
|
|
|
width: 100%;
|
|
|
padding: 14px 13px;
|
|
|
- background: #fff;
|
|
|
+ background: #ffffff;
|
|
|
border-radius: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
|
|
|
}
|
|
|
|
|
|
.ai-card__text {
|
|
|
font-size: 14px;
|
|
|
- line-height: 1.65;
|
|
|
- white-space: pre-wrap;
|
|
|
+ color: #151515;
|
|
|
+ line-height: 23px;
|
|
|
word-break: break-word;
|
|
|
+ white-space: pre-wrap;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
.fallback-card {
|
|
|
margin: 14px 15px 0;
|
|
|
padding: 14px 13px;
|
|
|
- background: #fff;
|
|
|
+ background: #ffffff;
|
|
|
border-radius: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fallback-card__text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #151515;
|
|
|
+ line-height: 23px;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-word;
|
|
|
}
|
|
|
|
|
|
.empty {
|
|
|
@@ -260,15 +238,6 @@
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <header class="nav">
|
|
|
- <button type="button" class="nav__close" id="btnClose" aria-label="关闭">×</button>
|
|
|
- <div class="nav__center">
|
|
|
- <div class="nav__title" id="navTitle">与AI助手-U宝</div>
|
|
|
- <div class="nav__url">www.ailien.shop</div>
|
|
|
- </div>
|
|
|
- <div class="nav__side"></div>
|
|
|
- </header>
|
|
|
-
|
|
|
<main id="main">
|
|
|
<div class="empty">对话内容加载中…</div>
|
|
|
</main>
|
|
|
@@ -300,7 +269,7 @@
|
|
|
}
|
|
|
.continue-btn__label {
|
|
|
display: block;
|
|
|
- height: 20px;
|
|
|
+ height: 16px;
|
|
|
width: auto;
|
|
|
max-width: 90%;
|
|
|
pointer-events: none;
|
|
|
@@ -392,13 +361,6 @@
|
|
|
return qText + "的讨论";
|
|
|
}
|
|
|
|
|
|
- function formatNavTitle(question) {
|
|
|
- var titled = formatDiscussionTitle(question);
|
|
|
- var maxLen = 14;
|
|
|
- var short = titled.length > maxLen ? titled.slice(0, maxLen) + "..." : titled;
|
|
|
- return short + "-U宝";
|
|
|
- }
|
|
|
-
|
|
|
function formatDate(ts) {
|
|
|
var d = ts ? new Date(Number(ts)) : new Date();
|
|
|
if (isNaN(d.getTime())) d = new Date();
|
|
|
@@ -415,9 +377,9 @@
|
|
|
var userText = msg.isImage ? "[图片]" : String(msg.content || "").trim();
|
|
|
if (!userText) continue;
|
|
|
html +=
|
|
|
- '<div class="row row--user"><div class="user-bubble">' +
|
|
|
+ '<div class="row row--user"><div class="user-bubble"><div class="user-bubble__text">' +
|
|
|
escHtml(userText) +
|
|
|
- "</div></div>";
|
|
|
+ "</div></div></div>";
|
|
|
continue;
|
|
|
}
|
|
|
if (msg.role === "ai") {
|
|
|
@@ -465,9 +427,7 @@
|
|
|
applyWeixinShareMeta();
|
|
|
sharePayloadCache = data || null;
|
|
|
var main = document.getElementById("main");
|
|
|
- var navTitle = document.getElementById("navTitle");
|
|
|
if (!data) {
|
|
|
- if (navTitle) navTitle.textContent = "与AI助手-U宝";
|
|
|
main.innerHTML = '<div class="empty">对话内容不存在或链接已失效</div>';
|
|
|
refreshWxLaunchTagAttrs();
|
|
|
return;
|
|
|
@@ -479,7 +439,6 @@
|
|
|
var pageTitle = formatDiscussionTitle(firstQuestion);
|
|
|
var dateText = formatDate(data.shareTime);
|
|
|
|
|
|
- if (navTitle) navTitle.textContent = formatNavTitle(firstQuestion);
|
|
|
document.title = pageTitle;
|
|
|
|
|
|
var bodyHtml =
|
|
|
@@ -498,7 +457,7 @@
|
|
|
bodyHtml += '<section class="conversation">' + convHtml + "</section>";
|
|
|
} else if (data.content) {
|
|
|
bodyHtml +=
|
|
|
- '<section class="fallback-card"><div class="ai-card__text">' +
|
|
|
+ '<section class="fallback-card"><div class="fallback-card__text">' +
|
|
|
escHtml(data.content) +
|
|
|
"</div></section>";
|
|
|
} else {
|
|
|
@@ -1005,15 +964,6 @@
|
|
|
bindWeChatLaunchTagEvents();
|
|
|
scheduleWeChatJssdkBootstrap();
|
|
|
document.getElementById("btnContinue").addEventListener("click", tryOpenApp);
|
|
|
- document.getElementById("btnClose").addEventListener("click", function () {
|
|
|
- if (window.history.length > 1) {
|
|
|
- window.history.back();
|
|
|
- } else if (typeof WeixinJSBridge !== "undefined") {
|
|
|
- WeixinJSBridge.call("closeWindow");
|
|
|
- } else {
|
|
|
- window.close();
|
|
|
- }
|
|
|
- });
|
|
|
render(parsePayload());
|
|
|
})();
|
|
|
</script>
|
