docs(demo): publish demo access and persistent test account policy

Author: maikebing

data/products.ts

@@ -26,6 +26,7 @@ export interface Product {
   github: string;
   gitee: string;
   tags: string[];
+  demo?: {url: string; username: string; password: string};
 }
 
 export const products: Product[] = [
@@ -65,6 +66,7 @@ export const products: Product[] = [
     docs: "/docs/iotsharp/",
     websiteLabel: "在线演示",
     website: "https://iotsharp.online/",
+    demo: {url: "https://iotsharp.online/#/login", username: "demo@iotsharp.online", password: "P@ssw0rd"},
     github: "https://github.com/IoTSharp/IoTSharp",
     gitee: "https://gitee.com/IoTSharp/IoTSharp",
     tags: ["设备接入", "数字孪生", "规则链"]
@@ -105,6 +107,7 @@ export const products: Product[] = [
     docs: "/docs/sonnetdb/",
     websiteLabel: "产品官网",
     website: "https://www.sonnetdb.com/",
+    demo: {url: "https://iotsharp.online/sonnetdb/admin/login", username: "demo@iotsharp.online", password: "P@ssw0rd"},
     github: "https://github.com/IoTSharp/SonnetDB",
     gitee: "https://gitee.com/IoTSharp/SonnetDB",
     tags: ["时序", "多模型", ".NET 10"]

pages/[slug].tsx

@@ -60,6 +60,15 @@ const ProductPage: NextPage<ProductPageProps> = ({product}) => {
                 <ExternalLink size={17} aria-hidden="true"/> Gitee
               </a>
             </div>
+            {product.demo && (
+              <section className={styles.demoAccess} aria-label={`${product.name} 在线演示`}>
+                <h2>在线演示</h2>
+                <a href={product.demo.url} target="_blank" rel="noreferrer">打开 {product.name} 演示</a>
+                <p>账号：<code>{product.demo.username}</code><br/>密码：<code>{product.demo.password}</code></p>
+                <p>仅公共演示账号的用户名和密码每半小时恢复一次。</p>
+                <p><strong>正常注册账号可用于测试服务，账号、密码和业务数据均不参与演示重置，长期保留。</strong></p>
+              </section>
+            )}
           </div>
           <div className={styles.heroIndex} aria-hidden="true">
             <span>IoTSharp portfolio</span>

pages/product.module.scss

@@ -5,6 +5,22 @@
   background: var(--fluent-canvas);
 }
 
+.demoAccess {
+  max-width: 42rem;
+  margin-top: 2rem;
+  padding: 1.25rem;
+  border: 1px solid rgba(245, 247, 255, 0.38);
+  border-radius: 0.3rem;
+  background: rgba(20, 25, 72, 0.35);
+  font-size: 0.9rem;
+  line-height: 1.75;
+  overflow-wrap: anywhere;
+
+  h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
+  p { margin: 0.5rem 0 0; }
+  a { color: var(--fluent-accent-light); text-decoration: underline; text-underline-offset: 3px; }
+}
+
 .eyebrow {
   margin: 0;
   color: var(--fluent-teal);