@opentiny/vue-docs 3.23.1 → 3.24.1

package/src/views/comprehensive/index.vue

@@ -0,0 +1,391 @@
+<template>
+  <div class="header">
+    <div class="qr-code-trigger" @click="showQrCode = true">
+      <IconAi class="qr-icon" />
+      <div class="qr-text-wrapper">
+        <span class="qr-label">手机遥控</span>
+        <span class="qr-desc">扫码体验移动端操作</span>
+      </div>
+    </div>
+  </div>
+  <div class="app-container">
+    <!-- 主体内容区域 -->
+    <div class="main-content">
+      <Demo />
+    </div>
+    <div class="right-panel" :class="{ collapsed: !appData.showTinyRobot }">
+      <tiny-robot-chat :prompt-items="promptItems" :suggestion-pill-items="suggestionPillItems" />
+    </div>
+    <IconAi @click="appData.showTinyRobot = !appData.showTinyRobot" class="style-settings-icon"></IconAi>
+  </div>
+
+  <!-- QR Code Modal -->
+  <Teleport to="body">
+    <div class="qr-modal" v-if="showQrCode" @click.self="showQrCode = false">
+      <div class="qr-modal-content">
+        <div class="qr-modal-header">
+          <h3>手机遥控体验</h3>
+        </div>
+        <div class="qr-modal-body">
+          <div class="qr-wrapper">
+            <tiny-qr-code :value="sessionUrl" :size="200" color="#1677ff"></tiny-qr-code>
+            <div class="qr-status">
+              <div class="status-dot"></div>
+              <span>链接已生成</span>
+            </div>
+          </div>
+          <div class="qr-instructions">
+            <p class="instruction-title">使用说明</p>
+            <ol class="instruction-steps">
+              <li>使用微信扫一扫，扫描上方二维码</li>
+              <li>然后点击微信右上角的 "..." 图标</li>
+              <li>选择在默认浏览器中打开</li>
+              <li>可以选择直接语音交互也可使用AI对话框进行交互</li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { watch, ref, h } from 'vue'
+import TinyRobotChat from '@/components/tiny-robot-chat.vue'
+import { globalConversation } from '@/composable/utils'
+import { IconAi } from '@opentiny/tiny-robot-svgs'
+import CryptoJS from 'crypto-js'
+import { TinyQrCode } from '@opentiny/vue'
+import Demo from './Demo.vue'
+import { appData } from '@/tools/appData'
+
+appData.showTinyRobot = true
+const showQrCode = ref(false)
+const sessionUrl = ref('placeholder')
+
+const promptItems = [
+  {
+    label: '识别网页的内容',
+    description: '帮我在商品列表中查询最贵的手机和最便宜的笔记本',
+    icon: h('span', { style: { fontSize: '18px' } }, '💡')
+  },
+  {
+    label: '智能操作网页',
+    description: '帮我在商品列表中删除最贵的且分类为手机的商品',
+    icon: h('span', { style: { fontSize: '18px' } }, '🕹')
+  },
+  {
+    label: '智能操作网页',
+    description: '帮我在商品列表中添加一个华为p60品牌的手机商品',
+    icon: h('span', { style: { fontSize: '18px' } }, '🕹')
+  }
+]
+
+const suggestionPillItems = [
+  {
+    id: '1',
+    text: '商品列表',
+    icon: h('span', { style: { fontSize: '18px' } }, '🏢')
+  }
+]
+
+watch(
+  () => globalConversation.sessionId,
+  (newVal) => {
+    if (newVal) {
+      const encryptedId = CryptoJS.AES.encrypt(newVal, 'secret-session-id').toString()
+
+      const secretId = encodeURIComponent(encryptedId)
+      sessionUrl.value = 'http://39.108.160.245?id=' + secretId
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped>
+.header {
+  width: calc(100% - 502px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: #f5f5f5;
+}
+
+.qr-code-trigger {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 12px 20px;
+  border-radius: 12px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: linear-gradient(135deg, #1677ff 0%, #06b6d4 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.qr-code-trigger::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+  transform: translateX(-100%);
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.qr-code-trigger:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(22, 119, 255, 0.3);
+}
+
+.qr-code-trigger:hover::before {
+  transform: translateX(100%);
+}
+
+.qr-icon {
+  font-size: 24px;
+  margin-right: 12px;
+  color: white;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+  animation: float 3s ease-in-out infinite;
+}
+
+.qr-text-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.qr-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+  margin-bottom: 2px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.qr-desc {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.9);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+.qr-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+.qr-modal-content {
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  width: 460px;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.qr-modal-header {
+  margin-bottom: 32px;
+}
+
+.qr-modal-header h3 {
+  font-size: 22px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.close-icon {
+  cursor: pointer;
+  font-size: 20px;
+  color: #999;
+  transition: color 0.3s;
+}
+
+.close-icon:hover {
+  color: #666;
+}
+
+.qr-modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.qr-wrapper {
+  background-color: #f8f9fa;
+  padding: 24px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 24px;
+  position: relative;
+  animation: glow 2s ease-in-out infinite;
+}
+
+.qr-wrapper::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, #1677ff, #10b981, #1677ff);
+  border-radius: 10px;
+  z-index: -1;
+  filter: blur(8px);
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+}
+
+.qr-wrapper:hover::before {
+  opacity: 0.7;
+}
+
+@keyframes glow {
+  0% {
+    box-shadow:
+      0 0 5px rgba(22, 119, 255, 0.2),
+      0 0 10px rgba(22, 119, 255, 0.2),
+      0 0 15px rgba(22, 119, 255, 0.2);
+  }
+  50% {
+    box-shadow:
+      0 0 10px rgba(22, 119, 255, 0.3),
+      0 0 20px rgba(22, 119, 255, 0.3),
+      0 0 30px rgba(22, 119, 255, 0.3);
+  }
+  100% {
+    box-shadow:
+      0 0 5px rgba(22, 119, 255, 0.2),
+      0 0 10px rgba(22, 119, 255, 0.2),
+      0 0 15px rgba(22, 119, 255, 0.2);
+  }
+}
+
+.qr-status {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  background: #fff;
+  padding: 6px 12px;
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background-color: #10b981;
+  border-radius: 50%;
+  margin-right: 8px;
+  animation: pulse 2s infinite;
+}
+
+.qr-instructions {
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.instruction-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #1f2937;
+  margin-bottom: 12px;
+}
+
+.instruction-steps {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.instruction-steps li {
+  color: #4b5563;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.instruction-steps li:last-child {
+  margin-bottom: 0;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.app-container {
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+
+.main-content {
+  padding: 10px 10px;
+  height: 100%;
+  width: calc(100% - 502px);
+  position: relative;
+}
+
+.right-panel {
+  width: 480px;
+  height: 100%;
+  position: relative;
+  background: #fff;
+  border-left: 1px solid #e4e7ed;
+}
+
+.right-panel.collapsed {
+  width: 0;
+  overflow: hidden;
+}
+
+.style-settings-icon {
+  position: fixed;
+  bottom: 100px;
+  right: 100px;
+  font-size: 24px;
+  z-index: 30;
+  cursor: pointer;
+}
+</style>

package/src/views/comprehensive/products.json

@@ -0,0 +1,99 @@
+[
+  
+  {
+    "id": 1,
+    "name": "iPhone 16",
+    "price": 5999,
+    "description": "苹果手机",
+    "image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2FO1CN011qHTQ81edxfMcnfNR_%21%216000000003895-0-yinhe.jpg_300x300.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1750986769&t=4570d81c9f0301ab1745c75dfff9f272",
+    "category": "phones",
+    "stock": 100,
+    "status": "on",
+    "createdAt": "2024-03-20",
+    "updatedAt": "2025-05-29T21:56:30.481Z"
+  },
+  {
+    "id": 2,
+    "name": "MacBook Pro",
+    "price": 12999,
+    "description": "笔记本电脑",
+    "image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fg-search1.alicdn.com%2Fimg%2Fbao%2Fuploaded%2Fi3%2F1831488473%2FO1CN01I8MRyC2CSgWGbhVjJ_%21%211831488473.jpg_300x300.jpg&refer=http%3A%2F%2Fg-search1.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1750986810&t=9eb9c9e0765244130200dd0f935b9cea",
+    "category": "laptops",
+    "stock": 50,
+    "status": "off",
+    "createdAt": "2024-03-20",
+    "updatedAt": "2024-03-20"
+  },
+  {
+    "id": 3,
+    "name": "iPad",
+    "price": 2399,
+    "description": "平板电脑",
+    "image": "https://respic.3d66.com/coverimg/cache/f2d1/53893cd4d00efe87132f1e3371b72339.jpg%21medium-size-2?v=17611204&k=D41D8CD98F00B204E9800998ECF8427E",
+    "category": "tablets",
+    "stock": 12999,
+    "status": "on",
+    "createdAt": "2025-05-27T00:49:29.993Z",
+    "updatedAt": "2025-05-29T16:11:49.743Z"
+  },
+  {
+    "id": 4,
+    "name": "Huawei Pura 70",
+    "price": 6499,
+    "description": "华为手机",
+    "image": "https://img1.baidu.com/it/u=1559062020,1043707656&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
+    "category": "phones",
+    "stock": 1999,
+    "status": "on",
+    "createdAt": "2025-05-27T00:54:38.771Z",
+    "updatedAt": "2025-05-29T22:29:40.124Z"
+  },
+  {
+    "id": 5,
+    "name": "Huawei Mate XT ultimate",
+    "price": 23999,
+    "description": "华为手机 非凡大师",
+    "image": "https://img2.baidu.com/it/u=2892977680,910281472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+    "category": "phones",
+    "stock": 100,
+    "status": "on",
+    "createdAt": "2025-05-27T00:54:38.771Z",
+    "updatedAt": "2025-05-30T17:40:59.199Z"
+  },
+  {
+    "id": 6,
+    "name": "小米15",
+    "price": 4999,
+    "description": "小米手机",
+    "image": "https://img2.baidu.com/it/u=2892977680,910281472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+    "category": "phones",
+    "stock": 222,
+    "status": "off",
+    "createdAt": "2025-05-29T00:30:02.226Z",
+    "updatedAt": "2025-05-29T16:14:35.150Z"
+  },
+  {
+    "id": 7,
+    "name": "小米 13",
+    "price": 3999,
+    "description": "小米手机",
+    "image": "https://img1.baidu.com/it/u=809120544,2106407569&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
+    "category": "phones",
+    "stock": 2222,
+    "status": "on",
+    "createdAt": "2025-05-29T00:32:46.308Z",
+    "updatedAt": "2025-05-30T21:28:28.543Z"
+  },
+  {
+    "id": 8,
+    "name": "Vivo X90",
+    "price": 2999,
+    "description": "Vivo手机",
+    "image": "https://img2.baidu.com/it/u=2892977680,910281472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
+    "category": "phones",
+    "stock": 3999,
+    "status": "on",
+    "createdAt": "2025-05-27T00:54:38.771Z",
+    "updatedAt": "2025-05-30T17:40:59.199Z"
+  }
+]

package/src/views/comprehensive/types/index.ts

@@ -0,0 +1,37 @@
+// 用户类型
+export interface User {
+  id: number
+  username: string
+  avatar?: string
+}
+
+// 商品类型
+export interface Product {
+  id: number
+  name: string
+  price: number
+  description?: string
+  image: string
+  category: string
+  stock: number
+  status: 'on' | 'off' // on: 上架, off: 下架
+  createdAt?: string
+  updatedAt?: string
+}
+
+// 登录表单类型
+export interface LoginForm {
+  username: string
+  password: string
+}
+
+// 商品表单类型
+export interface ProductForm {
+  name: string
+  price: number
+  description: string
+  image: string
+  category: string
+  stock: number
+  status: 'on' | 'off'
+}

package/src/views/layout/layout.vue

@@ -63,8 +63,8 @@ import { genMenus, getMenuIcons } from '@/menus.jsx'
 import { router } from '@/router.js'
 import { getWord, i18nByKey, appData, appFn, useApiMode, useTemplateMode } from '@/tools'
 import useTheme from '@/tools/useTheme'
-import FloatSettings from '@/views/components-doc/components/float-settings.vue'
-import VersionTip from '@/views/components-doc/components/version-tip.vue'
+import FloatSettings from '@/components/float-settings.vue'
+import VersionTip from '@/components/version-tip.vue'
 
 export default defineComponent({
   name: 'LayoutVue',

package/demos/mobile-first/app/pager/current-change.vue

@@ -1,34 +0,0 @@
-<template>
-  <tiny-pager
-    @current-change="handleCurrentChange"
-    :current-page="currentPage"
-    @update:current-page="currentPage = $event"
-    :page-size="100"
-    layout="total, sizes, prev, pager, next"
-    :total="1000"
-  >
-  </tiny-pager>
-</template>
-
-<script>
-import { TinyPager, TinyModal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPager
-  },
-  data() {
-    return {
-      currentPage: 5
-    }
-  },
-  methods: {
-    handleCurrentChange(val) {
-      TinyModal.message({
-        message: `current-change 事件，当前页: ${val}`,
-        status: 'info'
-      })
-    }
-  }
-}
-</script>

package/demos/mobile-first/app/pager/next-click.vue

@@ -1,34 +0,0 @@
-<template>
-  <tiny-pager
-    @next-click="nextClick"
-    :current-page="currentPage"
-    @update:current-page="currentPage = $event"
-    :page-size="100"
-    layout="total, sizes, prev, pager, next"
-    :total="1000"
-  >
-  </tiny-pager>
-</template>
-
-<script>
-import { TinyPager, TinyModal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPager
-  },
-  data() {
-    return {
-      currentPage: 5
-    }
-  },
-  methods: {
-    nextClick(val) {
-      TinyModal.message({
-        message: `next-click 事件，当前页: ${val}`,
-        status: 'info'
-      })
-    }
-  }
-}
-</script>

package/demos/mobile-first/app/pager/prev-click.vue

@@ -1,34 +0,0 @@
-<template>
-  <tiny-pager
-    @prev-click="prevClick"
-    :current-page="currentPage"
-    @update:current-page="currentPage = $event"
-    :page-size="100"
-    layout="total, sizes, prev, pager, next"
-    :total="1000"
-  >
-  </tiny-pager>
-</template>
-
-<script>
-import { TinyPager, TinyModal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyPager
-  },
-  data() {
-    return {
-      currentPage: 5
-    }
-  },
-  methods: {
-    prevClick(val) {
-      TinyModal.message({
-        message: `prev-click 事件，当前页: ${val}`,
-        status: 'info'
-      })
-    }
-  }
-}
-</script>