docs: rebuild README previews from 2x captures

Rework the product preview section around three real screens captured at
deviceScaleFactor 2 instead of the previous 900 px shots taken at a 75%
browser zoom, which read as blurry.

- capture the conversation workspace, the agent customization page and the
  visitor widget, then crop each one to a consistent frame
- drop the tight 480 px widget crop and its leftover gray strip
- restructure the preview section with one lead line and a caption per shot,
  and fold the local start-up steps into a shorter quick start
- keep the browser overlay out of the captures and note the method in the
  asset manifest
- finish the visible ReplyPier rename (sidebar wordmark, widget footer,
  page title, login screen, demo page) so screenshots and UI agree
This commit is contained in:
WangShen007 committed 2026-10-22 19:38:57 +08:00
1 parent b89dbb1dd1
commit a20884c2e4
13 files changed
+89 -53

No files matched your search

+2 -2
View File
@@ -35,12 +35,12 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="ChatterMate">
<meta name="apple-mobile-web-app-title" content="ReplyPier">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@500;600;700&display=swap">
<title>ChatterMate · 智能客服工作台</title>
<title>ReplyPier · 智能客服工作台</title>
<meta name="shopify-api-key" content="<%= VITE_SHOPIFY_API_KEY %>" />
<!-- Shopify App Bridge, and the Polaris web components the Shopify views use.
Only loaded inside the Shopify admin (host/shop query params present);
@@ -595,7 +595,7 @@ const handleInitiationClick = () => {
<!-- Powered by footer for welcome message -->
<div class="powered-by-welcome" :style="messageNameStyles">
<BrandMark class="chattermate-logo" :size="20" />
<span class="cm-powered-prefix">技术支持:</span><strong class="cm-brand">ChatterMate</strong>
<span class="cm-powered-prefix">技术支持:</span><strong class="cm-brand">ReplyPier</strong>
</div>
</div>
@@ -693,7 +693,7 @@ const handleInitiationClick = () => {
<!-- Add powered by footer -->
<div class="powered-by" :style="messageNameStyles">
<BrandMark class="chattermate-logo" :size="20" />
<span class="cm-powered-prefix">技术支持:</span><strong class="cm-brand">ChatterMate</strong>
<span class="cm-powered-prefix">技术支持:</span><strong class="cm-brand">ReplyPier</strong>
</div>
</div>
@@ -67,7 +67,7 @@ const initial = computed(() => (props.userName || '·').trim().slice(0, 1))
<div class="brand">
<BrandMark :size="34" />
<div v-if="!isCollapsed" class="brand-text">
<span class="wordmark">Chatter<i>Mate</i></span>
<span class="wordmark">Reply<i>Pier</i></span>
<span class="brand-sub">智能客服工作台</span>
</div>
<SidebarToggle :isCollapsed="isCollapsed" @toggle="emit('toggle')" />
+1 -1
View File
@@ -372,7 +372,7 @@ const openNotificationsFromSheet = () => {
footer would clip the last message / message input out of view. -->
<footer v-if="!props.hideHeader && !props.flush" class="footer">
<div class="footer-content">
<p>&copy; 2024 ChatterMate。保留所有权利。</p>
<p>&copy; 2024 ReplyPier。保留所有权利。</p>
<nav class="footer-links">
<a href="https://chattermate.chat/privacy_policy.html">隐私政策</a>
<a href="https://chattermate.chat/terms_and_conditions.html">服务条款</a>
+2 -2
View File
@@ -287,7 +287,7 @@ const handleVerifyAndResetPassword = async () => {
<section class="form-col">
<div class="form-top reveal" style="--i: 0">
<BrandMark :size="34" />
<span class="wordmark" style="font-size: 21px">Chatter<i>Mate</i></span>
<span class="wordmark" style="font-size: 21px">Reply<i>Pier</i></span>
<button
class="icon-btn"
@click="toggleTheme"
@@ -376,7 +376,7 @@ const handleVerifyAndResetPassword = async () => {
</div>
<div class="form-foot reveal" style="--i: 6">
<span>© 2026 ChatterMate</span>
<span>© 2026 ReplyPier</span>
<span class="mono">APACHE-2.0 · SELF-HOSTED</span>
</div>
</section>
+5 -5
View File
@@ -1913,7 +1913,7 @@ const askAiHotkey = computed(() => parentDisplay.value?.hotkey !== false)
</p>
<div class="widget-unavailable-footer">
<BrandMark class="chattermate-logo-small" :size="20" />
<a class="cm-powered-link" href="https://chattermate.chat" target="_blank" rel="noopener"><span class="cm-powered-prefix">由 </span><strong class="cm-brand">ChatterMate</strong><span class="cm-powered-prefix"> 提供支持</span></a>
<a class="cm-powered-link" href="https://chattermate.chat" target="_blank" rel="noopener"><span class="cm-powered-prefix">由 </span><strong class="cm-brand">ReplyPier</strong><span class="cm-powered-prefix"> 提供支持</span></a>
</div>
</div>
</div>
@@ -2075,7 +2075,7 @@ const askAiHotkey = computed(() => parentDisplay.value?.hotkey !== false)
<!-- Powered by footer for welcome message -->
<div class="powered-by-welcome" :style="messageNameStyles">
<BrandMark class="chattermate-logo" :size="20" />
<a class="cm-powered-link" href="https://chattermate.chat" target="_blank" rel="noopener"><span class="cm-powered-prefix">由 </span><strong class="cm-brand">ChatterMate</strong><span class="cm-powered-prefix"> 提供支持</span></a>
<a class="cm-powered-link" href="https://chattermate.chat" target="_blank" rel="noopener"><span class="cm-powered-prefix">由 </span><strong class="cm-brand">ReplyPier</strong><span class="cm-powered-prefix"> 提供支持</span></a>
</div>
</div>
@@ -2102,7 +2102,7 @@ const askAiHotkey = computed(() => parentDisplay.value?.hotkey !== false)
<!-- Powered by footer for landing page -->
<div class="powered-by-landing" :style="messageNameStyles">
<BrandMark class="chattermate-logo" :size="20" />
<a class="cm-powered-link" href="https://chattermate.chat" target="_blank" rel="noopener"><span class="cm-powered-prefix">由 </span><strong class="cm-brand">ChatterMate</strong><span class="cm-powered-prefix"> 提供支持</span></a>
<a class="cm-powered-link" href="https://chattermate.chat" target="_blank" rel="noopener"><span class="cm-powered-prefix">由 </span><strong class="cm-brand">ReplyPier</strong><span class="cm-powered-prefix"> 提供支持</span></a>
</div>
</div>
@@ -2260,7 +2260,7 @@ const askAiHotkey = computed(() => parentDisplay.value?.hotkey !== false)
<!-- Powered by footer for form -->
<div class="powered-by-landing" :style="messageNameStyles">
<BrandMark class="chattermate-logo" :size="20" />
<a class="cm-powered-link" href="https://chattermate.chat" target="_blank" rel="noopener"><span class="cm-powered-prefix">由 </span><strong class="cm-brand">ChatterMate</strong><span class="cm-powered-prefix"> 提供支持</span></a>
<a class="cm-powered-link" href="https://chattermate.chat" target="_blank" rel="noopener"><span class="cm-powered-prefix">由 </span><strong class="cm-brand">ReplyPier</strong><span class="cm-powered-prefix"> 提供支持</span></a>
</div>
</div>
@@ -2957,7 +2957,7 @@ const askAiHotkey = computed(() => parentDisplay.value?.hotkey !== false)
<!-- Powered by footer -->
<div class="powered-by" :style="messageNameStyles">
<BrandMark class="chattermate-logo" :size="20" />
<a class="cm-powered-link" href="https://chattermate.chat" target="_blank" rel="noopener"><span class="cm-powered-prefix">由 </span><strong class="cm-brand">ChatterMate</strong><span class="cm-powered-prefix"> 提供支持</span></a>
<a class="cm-powered-link" href="https://chattermate.chat" target="_blank" rel="noopener"><span class="cm-powered-prefix">由 </span><strong class="cm-brand">ReplyPier</strong><span class="cm-powered-prefix"> 提供支持</span></a>
</div>
</div>