Merge pull request #266 from opentiny/add-extend-case

feat(homepage): add coin game case

Author: rhlin

pnpm-lock.yaml

@@ -11,7 +11,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@opentiny/genui-sdk-vue": "1.1.0",
+    "@opentiny/genui-sdk-vue": "1.3.0",
+    "@opentiny/genui-sdk-materials-vue-opentiny-vue": "1.3.0",
     "@opentiny/tiny-robot-svgs": "^0.3.3",
     "@opentiny/vue": "~3.28.0",
     "@opentiny/vue-button": "~3.28.0",

sites/homepage/web/package.json

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, computed, watch } from 'vue';
 import { TinyButton, TinyButtonGroup, TinyTooltip } from '@opentiny/vue';
-import { GenuiRenderer } from '@opentiny/genui-sdk-vue';
+import { GenuiRenderer, GenuiConfigProvider } from '@opentiny/genui-sdk-vue';
+import { materials } from '@opentiny/genui-sdk-materials-vue-opentiny-vue';
 import { IconAi, IconUser } from '@opentiny/tiny-robot-svgs';
 import { IconArrowRight, IconPause, IconRefresh, IconStartCircle } from '@opentiny/vue-icon';
 import { LinkKey, linkMap } from '@/utils/link';
@@ -10,6 +11,8 @@ import { splitJsonIntoChunks } from '@/utils/jsonUtil';
 import caculatorJson from '@/static/caculator.json';
 import todoJson from '@/static/todo.json';
 import todoJsonEn from '@/static/todo.en.json';
+import coinGameJson from '@/static/coin-game.json';
+import coinGameJsonEn from '@/static/coin-game.en.json';
 import { t, locale } from '@/i18n';
 
 const TinyIconArrowRight = IconArrowRight();
@@ -37,17 +40,21 @@ let revealCardOnFirstChunk = false;
 const messageContentMap = {
   element: t('extend.prompt.element'),
   page: t('extend.prompt.page'),
+  coin: t('extend.prompt.coin'),
 };
 const bubbleContentMap = {
   element: t('extend.prompt.elementBubble'),
   page: t('extend.prompt.pageBubble'),
+  coin: t('extend.prompt.coinBubble'),
 };
 const inputMessage = computed(
   () => `?input-message=${messageContentMap[extendSelect.value as keyof typeof messageContentMap]}`,
 );
 
-/** 已开始回放流程（生成中 / 准备中 / 暂停待续）时固定在右下角；仅待播放或重播待命时居中 */
-const streamControlsDocked = computed(() => generating.value || preparingPlayback.value || !streamCompleted.value);
+/** 首次播放按钮居中展示；生成中 / 暂停 / 播放过后的重放均固定右下角，避免遮挡内容 */
+const streamControlsDocked = computed(
+  () => generating.value || preparingPlayback.value || !streamCompleted.value || hasPlayedOnce.value,
+);
 
 const userBubbleContent = computed(
   () => bubbleContentMap[extendSelect.value as keyof typeof bubbleContentMap],
@@ -57,6 +64,9 @@ const getJsonData = (type: string) => {
   if (type === 'element') {
     return caculatorJson;
   }
+  if (type === 'coin') {
+    return locale.value === 'en_US' ? coinGameJsonEn : coinGameJson;
+  }
   return locale.value === 'en_US' ? todoJsonEn : todoJson;
 };
 
@@ -227,7 +237,7 @@ const handleCornerReplay = () => {
 };
 
 watch(isMobile, (mobile) => {
-  if (mobile && extendSelect.value === 'page') {
+  if (mobile && (extendSelect.value === 'page' || extendSelect.value === 'coin')) {
     handleExtendClick('element');
   }
 });
@@ -268,6 +278,16 @@ onUnmounted(() => {
       >
         {{ t('extend.todoApp') }}
       </tiny-button>
+      <tiny-button
+        v-if="!isMobile"
+        class="extend-button extend-button-element-3"
+        :reset-time="0"
+        :class="{ 'extend-button-element-active': extendSelect === 'coin' }"
+        value="coin"
+        @click="handleExtendClick('coin')"
+      >
+        {{ t('extend.coinGame') }}
+      </tiny-button>
     </tiny-button-group>
     <div class="home-extend-schema">
       <div class="home-extend-schema-header">
@@ -310,13 +330,15 @@ onUnmounted(() => {
                   class="home-extend-render-area"
                   :class="{ 'is-visible': cardVisible, 'no-exit': suppressExitAnimation }"
                 >
-                  <GenuiRenderer
-                    :key="rendererKey"
-                    class="home-extend-schema-renderer"
-                    :content="message?.content || ''"
-                    :generating="generating"
-                    :customActions="customActions"
-                  />
+                  <GenuiConfigProvider :materials="materials">
+                    <GenuiRenderer
+                      :key="rendererKey"
+                      class="home-extend-schema-renderer"
+                      :content="message?.content || ''"
+                      :generating="generating"
+                      :customActions="customActions"
+                    />
+                  </GenuiConfigProvider>
                 </div>
               </div>
             </div>
@@ -645,11 +667,15 @@ onUnmounted(() => {
     font-size: 16px;
 
     &-element-1 {
-      border-radius: 382px;
+      border-radius: 382px 0 0 382px;
     }
 
     &-element-2 {
-      border-radius: 382px;
+      border-radius: 0;
+    }
+
+    &-element-3 {
+      border-radius: 0 382px 382px 0;
     }
 
     &-element-active {

sites/homepage/web/src/components/HomeExtend.vue

@@ -54,6 +54,7 @@
     "title": "Unlock more possibilities",
     "calculator": "Calculator",
     "todoApp": "Todo App",
+    "coinGame": "Coin Duel",
     "tryPlayground": "Try it in Playground",
     "replayControls": "Playback controls",
     "pause": "Pause",
@@ -64,8 +65,10 @@
     "prompt": {
       "element": "Generate a calculator without buttons, use div elements, macaron colors, no TinyLayout, make it beautiful",
       "page": "Create a rich todo app with as many features as you can think of",
+      "coin": "Create a coin duel simulator: both sides start with 100 yuan. The opponent tosses N coins in a row; if at least one lands heads the opponent wins X yuan, otherwise you win and the opponent pays you Y yuan. Simulate until one side goes broke and show both balances changing live with a line chart",
       "elementBubble": "Generate a calculator with div elements, macaron colors, make it beautiful",
-      "pageBubble": "Create a rich todo app with as many features as you can think of"
+      "pageBubble": "Create a rich todo app with as many features as you can think of",
+      "coinBubble": "Create a coin duel simulator where both sides start with 100 yuan and play until one goes broke"
     }
   },
   "guide": {

sites/homepage/web/src/i18n/en.json

@@ -54,6 +54,7 @@
     "title": "解锁更多玩法",
     "calculator": "计算器",
     "todoApp": "Todo应用",
+    "coinGame": "硬币博弈",
     "tryPlayground": "我也试试，进入 Playground",
     "replayControls": "回放控制",
     "pause": "暂停",
@@ -64,8 +65,10 @@
     "prompt": {
       "element": "生成一个计算器，不要用button，使用div，马卡龙配色，不要使用TinyLayout，要好看的",
       "page": "创建一个待办应用，界面要丰富，把想到的功能尽量加进去",
+      "coin": "生成一个硬币博弈模拟器：双方各有100元，对手连续抛N次硬币，只要至少一次正面向上则对手胜并赢走X元，否则你胜、对手赔你Y元，一直模拟到一方破产为止，用折线图实时展示双方资金变化",
       "elementBubble": "生成一个计算器，使用div，马卡龙配色，要好看的",
-      "pageBubble": "创建一个待办应用，界面要丰富，把想到的功能尽量加进去"
+      "pageBubble": "创建一个待办应用，界面要丰富，把想到的功能尽量加进去",
+      "coinBubble": "生成一个硬币博弈模拟器，双方各100元，模拟到一方破产"
     }
   },
   "guide": {