Accueil Explorer Aide
Connexion
liangyibo
/
CameraMachine
2
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

feat(home): 添加演示模式功能

- 在首页添加演示模式标识，当appModel为2时启用演示模式
- 演示模式下隐藏左侧拍照检查入口，只显示右侧处理图像功能
- 演示模式下右侧图片区域居中显示并调整样式
- 隐藏切换模式菜单选项以避免模式切换
- 更新应用版本号从1.3.9到1.4.0
- 清理未使用的路由注释代码
panqiuyao il y a 1 mois
Parent
394ab9014f
commit
8a3110e83f
5 fichiers modifiés avec 23 ajouts et 18 suppressions
Vue unifiée Afficher les stats Diff
  1. 0 1
      frontend/src/router/index.ts
  2. 19 5
      frontend/src/views/Home/index.vue
  3. 1 9
      frontend/src/views/Photography/mixin/usePhotography.ts
  4. 2 2
      package.json
  5. 1 1
      public/dist/index.html

+ 0 - 1
frontend/src/router/index.ts
Voir le fichier 

@@ -17,7 +17,6 @@ const routes: RouteRecordRaw[] = [
 
         path: "/home",
 
         path: "/home",
 
         name: "home",
 
         name: "home",
 
         component: () => import("@/views/Home/index.vue"),
 
         component: () => import("@/views/Home/index.vue"),
 
-        // component: () => import("@/views/Photography/processImage.vue"),
 
         meta: {
 
         meta: {
 
             title: '首页',
 
             title: '首页',
 
             noAuth: true,
 
             noAuth: true,

+ 19 - 5
frontend/src/views/Home/index.vue
Voir le fichier 

@@ -11,16 +11,18 @@
 
     <!-- 背景图片 -->
 
     <!-- 背景图片 -->
 
     <img src="@/assets/images/home/bg.png" alt="背景图片" class="background-image" />
 
     <img src="@/assets/images/home/bg.png" alt="背景图片" class="background-image" />
 
 
 
-    <!-- 左侧图片区域 -->
 
-    <div class="image-container left-image" @click="goCheck" v-log="{ describe: { action: '点击拍照检查入口' } }">
 
+    <!-- 左侧图片区域 - 演示模式隐藏 -->
 
+<!--
 
+    <div v-if="!isDemoMode" class="image-container left-image" @click="goCheck" v-log="{ describe: { action: '点击拍照检查入口' } }">
 
       <img src="@/assets/images/home/left.png" alt="拍摄产品并处理图像" class="zoom-on-hover" />
 
       <img src="@/assets/images/home/left.png" alt="拍摄产品并处理图像" class="zoom-on-hover" />
 
       <div class="overlay-text">拍摄产品<br>并处理图像</div>
 
       <div class="overlay-text">拍摄产品<br>并处理图像</div>
 
     </div>
 
     </div>
 
+-->
 
 
 
-    <!-- 右侧图片区域 -->
 
-    <div class="image-container right-image"  @click="goShot" v-log="{ describe: { action: '点击仅处理图像入口' } }">
 
+    <!-- 右侧图片区域 - 演示模式下居中显示 -->
 
+    <div class="image-container" :class="{ 'center-image': isDemoMode }" @click="goShot" v-log="{ describe: { action: '点击仅处理图像入口' } }">
 
       <img src="@/assets/images/home/right.png" alt="仅处理图像" class="zoom-on-hover" />
 
       <img src="@/assets/images/home/right.png" alt="仅处理图像" class="zoom-on-hover" />
 
-      <div class="overlay-text" style="line-height: 80px;">仅处理图像</div>
 
+      <div class="overlay-text" :style="isDemoMode ? 'line-height: 50px;' : 'line-height: 80px;'">仅处理图像</div>
 
     </div>
 
     </div>
 
 
 
     <!-- 版本公告对话框 -->
 
     <!-- 版本公告对话框 -->
 
@@ -68,6 +70,7 @@ const loading = ref(true);
 
 const healthReady = ref(false); // 程序是否已完成自检
 
 const healthReady = ref(false); // 程序是否已完成自检
 
 const syncLoading = ref(false); // 同步配置的loading状态
 
 const syncLoading = ref(false); // 同步配置的loading状态
 
 const syncCompleted = ref(false); // 同步是否完成
 
 const syncCompleted = ref(false); // 同步是否完成
 
+const isDemoMode = ref(false); // 演示模式标识
 
 const loadingText = computed(() => {
 
 const loadingText = computed(() => {
 
   if (!healthReady.value) {
 
   if (!healthReady.value) {
 
     return '程序启动中...';
 
     return '程序启动中...';
 
@@ -377,6 +380,9 @@ onMounted(() => {
 
   useUserInfoStore = useUserInfo();
 
   useUserInfoStore = useUserInfo();
 
   tokenInfoStore = tokenInfo();
 
   tokenInfoStore = tokenInfo();
 
 
 
+  // 演示模式判断：当前为仅处理图像模式时隐藏拍摄入口
 
+  isDemoMode.value = configInfoStore.appModel === 2;
 
+
 
   // 监听登录成功事件
 
   // 监听登录成功事件
 
   window.addEventListener('login-success', handleLoginSuccess);
 
   window.addEventListener('login-success', handleLoginSuccess);
 
 
 
@@ -456,6 +462,14 @@ onUnmounted(() => {
 
   margin-left: 50px;
 
   margin-left: 50px;
 
 }
 
 }
 
 
 
+// 演示模式下图片居中显示
 
+.center-image {
 
+  top: 50%;
 
+  left: 50%;
 
+  transform: translate(-50%, -50%);
 
+  margin-left: 0;
 
+}
 
+
 
 .overlay-text {
 
 .overlay-text {
 
   position: absolute;
 
   position: absolute;
 
   top: 50%;
 
   top: 50%;

+ 1 - 9
frontend/src/views/Photography/mixin/usePhotography.ts
Voir le fichier 

@@ -531,21 +531,13 @@ export default function usePhotography() {
 
     }
 
     }
 
 
 
     const menu = computed(() => {
 
     const menu = computed(() => {
 
+      // 演示模式：隐藏切换模式入口
 
       if (configInfoStore.appModel === 2) {
 
       if (configInfoStore.appModel === 2) {
 
         return [
 
         return [
 
           {
 
           {
 
             type: 'setting'
 
             type: 'setting'
 
           },
 
           },
 
           {
 
           {
 
-            name: '切换模式',
 
-            click() {
 
-              configInfoStore.updateAppModel(1)
 
-              Router.push({
 
-                name: 'PhotographyCheck'
 
-              })
 
-            }
 
-          },
 
-          {
 
             name: '生成图目录',
 
             name: '生成图目录',
 
             click() {
 
             click() {
 
               openOutputDir()
 
               openOutputDir()

+ 2 - 2
package.json
Voir le fichier 

@@ -1,7 +1,7 @@
 
 {
 
 {
 
   "name": "ZhiHuiYin",
 
   "name": "ZhiHuiYin",
 
-  "version": "1.3.9",
 
-  "description": "智慧拍照机是一种结合人工智能技术与传统摄影设备的创新产品,版本号为1.3.9",
 
+  "version": "1.4.0",
 
+  "description": "智慧拍照机是一种结合人工智能技术与传统摄影设备的创新产品,版本号为1.4.0",
 
   "releaseNotes": "1.3.9 更新版本",
 
   "releaseNotes": "1.3.9 更新版本",
 
   "main": "main.js",
 
   "main": "main.js",
 
   "scripts": {
 
   "scripts": {

+ 1 - 1
public/dist/index.html
Voir le fichier 

@@ -5,7 +5,7 @@
 
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />

     <link rel="icon" type="image/svg+xml" href="./vite.svg" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     <title>智惠映AI自动拍照机</title>

     <title>智惠映AI自动拍照机</title>

-    <script type="module" crossorigin src="./assets/index-CP5FbtoN.js"></script>
 
+    <script type="module" crossorigin src="./assets/index-Cv7ihufC.js"></script>
 
     <link rel="stylesheet" crossorigin href="./assets/index-B8MPi9a0.css">
 
     <link rel="stylesheet" crossorigin href="./assets/index-B8MPi9a0.css">
 
   </head>

   </head>

   <body>

   <body>