@opentinyvue/vue-docs 3.24.4 → 3.24.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opentinyvue/vue-docs",
   "type": "module",
-  "version": "3.24.4",
+  "version": "3.24.5",
   "license": "MIT",
   "devDependencies": {
     "@playwright/test": "~1.49.0",
@@ -56,6 +56,7 @@
     "@vue/shared": "^3.4.31",
     "@vueuse/core": "^12.7.0",
     "@vueuse/head": "0.7.13",
+    "crypto-js": "^4.2.0",
     "github-markdown-css": "~5.1.0",
     "highlight.js": "^11.5.1",
     "marked": "^4.3.0",
@@ -66,17 +67,17 @@
     "vue-i18n": "~9.14.3",
     "vue-router": "4.1.5",
     "@opentiny-internal/unplugin-virtual-template": "~0.1.1-beta.0",
-    "@opentiny/utils": "~3.24.0",
     "@opentiny/vue": "~3.24.0",
+    "@opentiny/utils": "~3.24.0",
     "@opentiny/vue-common": "~3.24.0",
     "@opentiny/vue-design-aurora": "~3.24.0",
     "@opentiny/vue-design-saas": "~3.24.0",
-    "@opentiny/vue-design-smb": "~3.24.0",
     "@opentiny/vue-directive": "~3.24.0",
+    "@opentiny/vue-design-smb": "~3.24.0",
     "@opentiny/vue-flowchart": "~3.24.0",
     "@opentiny/vue-hooks": "~3.24.0",
-    "@opentiny/vue-huicharts": "~3.24.0",
     "@opentiny/vue-icon": "~3.24.0",
+    "@opentiny/vue-huicharts": "~3.24.0",
     "@opentiny/vue-icon-multicolor": "~3.24.0",
     "@opentiny/vue-icon-saas": "~3.24.0",
     "@opentiny/vue-locale": "~3.24.0",

package/src/App.vue

@@ -17,7 +17,7 @@ import { iconClose } from '@opentiny/vue-icon'
 import { appData } from './tools'
 import useTheme from './tools/useTheme'
 import { useNextClient } from '@opentiny/next-vue'
-import { globalConversation } from './views/components-doc/composition/utils'
+import { globalConversation } from './composable/utils'
 
 export default defineComponent({
   name: 'AppVue',

package/src/{views/components-doc/components → components}/demo.vue

@@ -75,7 +75,7 @@ import { i18nByKey, getWord } from '@/i18n'
 import { $split, fetchDemosFile } from '@/tools'
 import { Tabs as TinyTabs, TabItem as TinyTabItem, Button as TinyButton } from '@opentiny/vue'
 import { AutoTip as vAutoTip } from '@opentiny/vue-directive'
-import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from '../cmp-config'
+import { languageMap, vueComponents, getWebdocPath, staticDemoPath } from '../views/components-doc/cmp-config'
 import { router } from '@/router.js'
 import demoConfig from '@demos/config.js'
 import { useApiMode, useTemplateMode } from '@/tools'

package/src/{views/components-doc → components}/tiny-robot-chat.vue

@@ -2,13 +2,13 @@
   <!-- mcp-robot弹窗 -->
   <tr-container v-model:show="appData.showTinyRobot" v-model:fullscreen="fullscreen">
     <div v-if="messages.length === 0">
-      <tr-welcome title="智能助手" description="您好，我是Opentiny AI智能助手" :icon="welcomeIcon">
+      <tr-welcome title="智能助手" description="您好，我是OpenTiny AI智能助手" :icon="welcomeIcon">
         <template #footer>
           <div class="welcome-footer"></div>
         </template>
       </tr-welcome>
       <tr-prompts
-        :items="promptItems"
+        :items="customPromptItems"
         :wrap="true"
         item-class="prompt-item"
         class="tiny-prompts"
@@ -18,7 +18,7 @@
     <tr-bubble-list v-else :items="messages" :roles="roles" auto-scroll></tr-bubble-list>
     <template #footer>
       <div class="chat-input">
-        <TrSuggestionPills :items="suggestionPillItems" @item-click="handleSuggestionPillItemClick" /><br />
+        <TrSuggestionPills :items="customSuggestionPillItems" @item-click="handleSuggestionPillItemClick" /><br />
         <tr-sender
           ref="senderRef"
           mode="single"
@@ -42,20 +42,21 @@
 <script setup lang="ts">
 import { TrBubbleList, TrContainer, TrPrompts, TrSender, TrWelcome, TrSuggestionPills } from '@opentiny/tiny-robot'
 import { GeneratingStatus } from '@opentiny/tiny-robot-kit'
-import { useTinyRobot } from './composition/useTinyRobot'
-import { appData } from '../../tools/appData'
+import { useTinyRobot } from '../composable/useTinyRobot'
+import { appData } from '../tools/appData'
+
+const props = defineProps<{
+  promptItems: any[]
+  suggestionPillItems: any[]
+}>()
 
 const {
-  client,
   fullscreen,
-  show,
   welcomeIcon,
-  promptItems,
-  computedMessages,
+  promptItems: defaultPromptItems,
   messages,
   messageState,
   inputMessage,
-  sendMessage,
   abortRequest,
   roles,
   handlePromptItemClick,
@@ -64,9 +65,12 @@ const {
   clearTemplate,
   handleSendMessage,
   handleMessageKeydown,
-  suggestionPillItems,
+  suggestionPillItems: defaultSuggestionPillItems,
   handleSuggestionPillItemClick
 } = useTinyRobot()
+
+const customPromptItems = props.promptItems || defaultPromptItems
+const customSuggestionPillItems = props.suggestionPillItems || defaultSuggestionPillItems
 </script>
 
 <style scoped lang="less">

package/src/{views/components-doc/composition → composable}/DifyModelProvider.ts

@@ -33,7 +33,6 @@ export class DifyModelProvider extends BaseModelProvider {
     try {
       // 验证请求的messages属性，必须是数组，且每个消息必须有role\content属性
       const lastMessage = request.messages[request.messages.length - 1].content
-
       // 模拟异步流式响应
       const response = await fetch(`${this.config.apiUrl}/chat-messages`, {
         method: 'POST',

package/src/composable/storage.ts

@@ -0,0 +1,71 @@
+import { ref, watch } from 'vue'
+
+function parse(str) {
+  if (str === null) return undefined
+  const type = str[0]
+  const strVal = str.slice(1)
+  // 对象时，有可能是Date, 否则反解析后统一是对象
+  if (type === 'o' || type === 'b') {
+    let val = JSON.parse(strVal)
+    return typeof val === 'string' ? new Date(val) : val
+  }
+  if (type === 'n') return +Number(strVal)
+  if (type === 's') return strVal
+}
+
+// 带前缀的保存值
+function save(store, k, v) {
+  const type = typeof v
+  store.setItem(k, type[0] + (type === 'object' ? JSON.stringify(v) : v))
+}
+
+/**
+ * 快速的保存值到 sessionStorage, localStorage.
+ * 支持基本类型，时间，数组，对象,null，不存在的键值返回undefined 。
+ * 不支持：Map,Set, 以及多级串联赋值，比如：$session.obj.name="abcd"
+ */
+function handler(storage) {
+  return {
+    get(target, propKey, receiver) {
+      return parse(storage.getItem(propKey))
+    },
+    set(target, propKey, value) {
+      save(storage, propKey, value)
+      return true
+    }
+  }
+}
+
+/** * 快速读写sessionStorage 示例： $session.abc="shen" */
+const $session = new Proxy({}, handler(sessionStorage))
+
+/** * 快速读写 localStorage 示例： $local.abc="shen" */
+const $local = new Proxy({}, handler(localStorage))
+
+/** * 全局共享值，刷新即丢失！  示例： $cache.abc="shen" */
+const $cache = {}
+
+const typeMatcher = { session: $session, local: $local, api: null }
+
+/**
+ * 用于记录用户行为,并保存到session,local 或api接口（api保存的功能还未实现）
+ * 示例：useAutoStore("session","key1")
+ *       useAutoStore("session","key2",100)
+ *       useAutoStore("session","key2",$session.key2 || 100)
+ * @param type 自动存储到的目标
+ * @param key 存储时的key
+ * @param defaultValue 默认值。
+ * @returns 响应式ref
+ */
+const useAutoStore = (type, key, defaultValue) => {
+  let refVar = ref(typeMatcher[type][key])
+  watch(refVar, (curr, prev) => {
+    typeMatcher[type][key] = curr
+  })
+
+  refVar.value = refVar.value ?? defaultValue
+
+  return refVar
+}
+
+export { $session, $local, $cache, useAutoStore }

package/src/{views/components-doc/composition → composable}/utils.ts

@@ -5,7 +5,11 @@
 
 import type { ChatMessage, ChatCompletionResponse, StreamHandler } from '@opentiny/tiny-robot-kit'
 import type { ChatCompletionRequest } from '@opentiny/tiny-robot-kit'
-import type { Ref } from 'vue'
+import { ref, type Ref } from 'vue'
+
+export { $local } from './storage'
+
+export const showTinyRobot = ref(true)
 
 export const globalConversation = {
   id: '',

package/src/router.js

@@ -7,6 +7,7 @@ const Components = () => import('@/views/components-doc/index.vue')
 const Docs = () => import('@/views/docs/docs.vue')
 const Overview = () => import('@/views/overview.vue')
 const Features = () => import('@/views/features.vue')
+const Comprehensive = () => import('@/views/comprehensive/index.vue')
 
 const context = import.meta.env.VITE_CONTEXT
 
@@ -18,6 +19,11 @@ let routes = [
     name: 'overview',
     children: [{ name: 'Overview', path: '', component: Overview, meta: { title: '组件总览 | TinyVue' } }]
   },
+  {
+    path: `${context}:all?/zh-CN/:theme/comprehensive`,
+    component: Comprehensive,
+    name: 'comprehensive'
+  },
   // 文档
   {
     path: `${context}:all?/:lang/:theme/docs/:docId`,

package/src/views/components-doc/common.vue

@@ -99,16 +99,16 @@ import { debounce } from '@opentiny/utils'
 import { i18nByKey, getWord, $clone, useApiMode } from '@/tools'
 import { router } from '@/router.js'
 import { getWebdocPath } from './cmp-config'
-import DemoBox from './components/demo.vue'
-import AsideAnchor from './components/anchor.vue'
-import ComponentHeader from './components/header.vue'
-import ComponentContributor from './components/contributor.vue'
-import ApiDocs from './components/api-docs.vue'
-import McpDocs from './components/mcp-docs.vue'
-import useTasksFinish from './composition/useTasksFinish'
+import DemoBox from '../../components/demo.vue'
+import AsideAnchor from '../../components/anchor.vue'
+import ComponentHeader from '../../components/header.vue'
+import ComponentContributor from '../../components/contributor.vue'
+import ApiDocs from '../../components/api-docs.vue'
+import McpDocs from '../../components/mcp-docs.vue'
+import useTasksFinish from '../../composable/useTasksFinish'
 import { appData } from '../../tools/appData'
 
-import robotChat from './tiny-robot-chat.vue'
+import robotChat from '../../components/tiny-robot-chat.vue'
 
 const props = defineProps({ loadData: {}, appMode: {}, demoKey: {} })
 

package/src/views/comprehensive/Demo.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="products-page">
+    <div class="page-header">
+      <h3>商品管理</h3>
+    </div>
+    <div class="page-content">
+      <div class="button-box">
+        <tiny-button type="info" @click="addProductToEdit"> 添加商品 </tiny-button>
+        <tiny-button type="danger" @click="removeProduct"> 删除商品 </tiny-button>
+        <tiny-button type="success" @click="saveProduct"> 保存 </tiny-button>
+      </div>
+      <tiny-grid
+        auto-resize
+        ref="gridRef"
+        :data="products"
+        :height="500"
+        :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+        :tiny_mcp_config="{
+          server,
+          business: {
+            id: 'product-list',
+            description: '商品列表'
+          }
+        }"
+      >
+        <tiny-grid-column type="index" width="50" />
+        <tiny-grid-column type="selection" width="50" />
+        <tiny-grid-column title="商品图片" width="100">
+          <template #default="{ row }">
+            <tiny-image :src="row.image" :preview-src-list="[row.image]" class="product-image" />
+          </template>
+        </tiny-grid-column>
+
+        <tiny-grid-column field="name" title="商品名称" :editor="{ component: 'input' }" />
+        <tiny-grid-column
+          field="price"
+          :editor="{
+            component: 'input',
+            attrs: { type: 'number' }
+          }"
+          title="价格"
+        >
+          <template #default="{ row }"> ¥{{ row.price }} </template>
+        </tiny-grid-column>
+        <tiny-grid-column
+          field="stock"
+          :editor="{
+            component: 'input',
+            attrs: { type: 'number' }
+          }"
+          title="库存"
+        />
+        <tiny-grid-column
+          field="category"
+          :editor="{
+            component: 'select',
+            options: [
+              { label: '手机', value: 'phones' },
+              { label: '笔记本', value: 'laptops' },
+              { label: '平板', value: 'tablets' }
+            ]
+          }"
+          title="分类"
+        >
+          <template #default="{ row }">
+            {{ categoryLabels[row.category] }}
+          </template>
+        </tiny-grid-column>
+        <tiny-grid-column
+          field="status"
+          :editor="{
+            component: 'select',
+            options: [
+              { label: '上架', value: 'on' },
+              { label: '下架', value: 'off' }
+            ]
+          }"
+          title="状态"
+        >
+          <template #default="{ row }">
+            <tiny-tag :type="row.status === 'on' ? 'success' : 'warning'">
+              {{ row.status === 'on' ? '上架' : '下架' }}
+            </tiny-tag>
+          </template>
+        </tiny-grid-column>
+      </tiny-grid>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import productsData from './products.json'
+import { $local } from '../../composable/utils'
+import { useNextServer } from '@opentiny/next-vue'
+import { TinyGrid, TinyGridColumn, TinyButton, TinyTag, TinyModal, TinyImage } from '@opentiny/vue'
+
+if (!$local.products) {
+  $local.products = productsData
+}
+
+const products = ref($local.products)
+const gridRef = ref(null)
+
+const categoryLabels: Record<string, string> = {
+  phones: '手机',
+  laptops: '笔记本',
+  tablets: '平板'
+}
+
+// 新增商品到编辑弹窗
+const addProductToEdit = async () => {
+  gridRef?.value?.insert({
+    'image': 'https://img1.baidu.com/it/u=1559062020,1043707656&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
+    price: 10000,
+    stock: 100,
+    category: 'phones',
+    status: 'on'
+  })
+}
+
+const removeProduct = () => {
+  const selectedRows = gridRef?.value?.getSelectRecords()
+  if (selectedRows.length === 0) {
+    TinyModal.confirm({
+      message: '请选择要删除的商品',
+      title: '删除商品',
+      status: 'warning'
+    })
+    return
+  }
+  if (selectedRows.length > 0) {
+    gridRef?.value?.removeSelecteds()
+  }
+}
+
+const saveProduct = () => {
+  setTimeout(() => {
+    const data = gridRef?.value?.getTableData()
+    $local.products = data.tableData
+    TinyModal.message({
+      message: '保存成功',
+      status: 'success'
+    })
+  }, 1000)
+}
+
+const { server } = useNextServer({
+  serverInfo: { name: 'commodity-config', version: '1.0.0' }
+})
+</script>
+
+<style scoped lang="less">
+.products-page {
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 16px 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    position: relative;
+    border: 1px solid #edf2f7;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 4px;
+      height: 24px;
+      background: #1677ff;
+      border-radius: 2px;
+      transform: translateY(-50%);
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: #1f2937;
+      position: relative;
+      padding-left: 20px;
+      letter-spacing: 0.3px;
+    }
+  }
+}
+
+.button-box {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 20px;
+  justify-content: flex-end;
+}
+.loading-state {
+  padding: 20px;
+}
+
+.product-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+}
+.page-content {
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
+}
+</style>

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',