feat: 工作台改版并区分东大与新大陆扫码

src/common/scanConfig.js

@@ -4,6 +4,9 @@ export const DICTIONARY_TYPE_SCANNER = 10046;
 
 export const PHONE_SCAN_BRAND = 'phone';
 
+// 历史误用 brand=newland 表示东集；真正的新大陆是 nlscan
+const LEGACY_SEUIC_BRANDS = ['newland', '东集', 'idata'];
+
 export const PHONE_SCAN_CONFIG = {
 	brand: PHONE_SCAN_BRAND,
 	name: '手机扫码',
@@ -16,6 +19,28 @@ export function isPhoneScanConfig(config) {
 	return !!(config && (config.isPhoneScan || config.brand === PHONE_SCAN_BRAND));
 }
 
+function migrateLegacySeuicBrand(config) {
+	if (!config || isPhoneScanConfig(config)) {
+		return config;
+	}
+	const brand = String(config.brand || '');
+	const name = String(config.name || '');
+	const action = String(config.action || '');
+	// 历史内置配置把东集误标成 brand=newland；真正的新大陆是 nlscan
+	const isLegacySeuicLabel = LEGACY_SEUIC_BRANDS.includes(brand) || name === '东集';
+	if (!isLegacySeuicLabel) {
+		return config;
+	}
+	if (action.includes('nlscan')) {
+		return config;
+	}
+	return {
+		...config,
+		brand: 'seuic',
+		name: (!name || name === '东集') ? '东大集成(AUTOID)' : name,
+	};
+}
+
 function enrichFromBuiltinConfig(config, builtinConfigs = []) {
 	if (!config || !builtinConfigs.length) {
 		return config;
@@ -24,7 +49,13 @@ function enrichFromBuiltinConfig(config, builtinConfigs = []) {
 	const builtin = builtinConfigs.find((item) => {
 		return item.action === config.action
 			|| item.name === config.name
-			|| item.brand === config.brand;
+			|| item.brand === config.brand
+			|| (item.brand === 'seuic' && (
+				String(config.name || '').includes('东大')
+				|| String(config.name || '').includes('东集')
+				|| String(config.name || '').includes('AUTOID')
+				|| String(config.action || '').includes('scannerservice.broadcast')
+			));
 	});
 
 	if (!builtin) {
@@ -49,7 +80,7 @@ export function normalizeConfig(raw, builtinConfigs = []) {
 		return { ...PHONE_SCAN_CONFIG };
 	}
 
-	const config = enrichFromBuiltinConfig({
+	let config = {
 		brand,
 		name: raw.name || '',
 		action: raw.action || raw.code || '',
@@ -57,7 +88,10 @@ export function normalizeConfig(raw, builtinConfigs = []) {
 		needSetup: raw.needSetup != null ? raw.needSetup : !!raw.need_setup,
 		setupAction: raw.setupAction || raw.setup_action || '',
 		setupParams: raw.setupParams || raw.setup_params || null,
-	}, builtinConfigs);
+	};
+
+	config = migrateLegacySeuicBrand(config);
+	config = enrichFromBuiltinConfig(config, builtinConfigs);
 
 	if (!config.brand || !config.action || !config.dataKey) {
 		return null;
@@ -73,7 +107,16 @@ export function mapDictionaryToScannerConfig(raw, builtinConfigs = []) {
 export function getScanConfig(builtinConfigs = []) {
 	try {
 		const data = uni.getStorageSync(STORAGE_KEY);
-		return normalizeConfig(data, builtinConfigs);
+		const normalized = normalizeConfig(data, builtinConfigs);
+		// 旧 brand=newland(东集) 迁移后写回，避免下次仍读到错误 brand
+		if (normalized && data && String(data.brand || '') !== String(normalized.brand || '')) {
+			try {
+				uni.setStorageSync(STORAGE_KEY, normalized);
+			} catch (e) {
+				console.log('迁移扫码枪配置写回失败', e);
+			}
+		}
+		return normalized;
 	} catch (e) {
 		console.log('读取扫码枪配置失败', e);
 		return null;

src/common/scanMixin.js

@@ -10,7 +10,8 @@ import {
 } from '@/common/scanConfig.js';
 
 const PDA_DEVICE_KEYWORDS = [
-	'newland', 'nls', 'sunmi', 'urovo', 'zebra', 'honeywell', 'idata', 'seuic',
+	'newland', 'nls', 'nlscan', 'sunmi', 'urovo', 'zebra', 'honeywell',
+	'idata', 'seuic', 'autoid', '东集', '东大',
 ];
 
 export default {
@@ -29,16 +30,18 @@ export default {
     getScannerConfigs() {
       return [
         {
-          brand: 'newland',
-          name: '东集',
+          // 东大集成 SEUIC / AUTOID 系列（如 AUTOID9），勿与新大陆 nlscan 混淆
+          brand: 'seuic',
+          name: '东大集成(AUTOID)',
           action: 'com.android.server.scannerservice.broadcast',
           dataKey: 'scannerdata',
           needSetup: true,
           setupAction: 'com.android.scanner.service_settings',
           setupParams: {
+            barcode_send_mode: 'BROADCAST',
             action_barcode_broadcast: 'com.android.server.scannerservice.broadcast',
             key_barcode_broadcast: 'scannerdata',
-            endchar: 'ENTER'
+            endchar: 'NONE'
           }
         },
         {
@@ -56,6 +59,7 @@ export default {
           needSetup: false
         },
         {
+          // 新大陆 Newland，广播为 nlscan.action.SCANNER_RESULT
           brand: 'nlscan',
           name: '新大陆',
           action: 'nlscan.action.SCANNER_RESULT',

src/components/storefabric/SearchSelectPopup.vue

@@ -1,6 +1,6 @@
 <template>
 	<u-popup v-model="visible" mode="bottom" :safe-area-inset-bottom="true" border-radius="16">
-		<view class="search-select">
+		<view class="search-select" :style="{ maxHeight: panelMaxHeight + 'px' }">
 			<view class="search-select__bar">
 				<text class="search-select__title">{{ title }}</text>
 				<text class="search-select__cancel" @click="visible = false">取消</text>
@@ -8,7 +8,12 @@
 			<view class="search-select__search">
 				<u-search v-model="keyword" :placeholder="placeholder" :show-action="false" />
 			</view>
-			<scroll-view scroll-y class="search-select__list">
+			<scroll-view
+				scroll-y
+				class="search-select__list"
+				:style="{ height: listHeight + 'px' }"
+				:enable-back-to-top="false"
+			>
 				<view v-if="!filteredList.length" class="search-select__empty">暂无匹配数据</view>
 				<view
 					v-for="item in filteredList"
@@ -32,6 +37,8 @@ export default {
 	data() {
 		return {
 			keyword: '',
+			panelMaxHeight: 520,
+			listHeight: 360,
 		};
 	},
 	computed: {
@@ -47,10 +54,28 @@ export default {
 	},
 	watch: {
 		show(val) {
-			if (val) this.keyword = '';
+			if (val) {
+				this.keyword = '';
+				this.calcHeight();
+			}
 		},
 	},
+	mounted() {
+		this.calcHeight();
+	},
 	methods: {
+		calcHeight() {
+			try {
+				const sys = uni.getSystemInfoSync();
+				const winH = sys.windowHeight || 600;
+				// 弹层约占屏高 65%，列表为弹层去掉标题+搜索后的剩余高度
+				this.panelMaxHeight = Math.floor(winH * 0.65);
+				this.listHeight = Math.max(220, this.panelMaxHeight - 140);
+			} catch (e) {
+				this.panelMaxHeight = 520;
+				this.listHeight = 360;
+			}
+		},
 		confirm(item) {
 			this.visible = false;
 			this.$emit('confirm', item);
@@ -63,8 +88,13 @@ export default {
 .search-select {
 	background: #fff;
 	padding-bottom: 20rpx;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
 }
 .search-select__bar {
+	flex-shrink: 0;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -80,10 +110,12 @@ export default {
 	color: #888;
 }
 .search-select__search {
+	flex-shrink: 0;
 	padding: 0 24rpx 12rpx;
 }
 .search-select__list {
-	height: 640rpx;
+	width: 100%;
+	box-sizing: border-box;
 }
 .search-select__empty {
 	padding: 80rpx 0;

src/pages/sys/user/scan-settings.vue

@@ -98,6 +98,7 @@ export default {
 				this.useFallbackConfigList();
 			}
 			this.ensurePhoneScanOption();
+			this.ensureSeuicOption();
 			this.ensureNlscanOption();
 			this.initFormFromSaved();
 		},
@@ -111,23 +112,29 @@ export default {
 				this.configList.push(phoneConfig);
 			}
 		},
-		ensureNlscanOption() {
-			const nlscanConfig = this.getScannerConfigs().find((item) => item.brand === 'nlscan');
-			if (!nlscanConfig) {
+		ensureBuiltinScannerOption(brand) {
+			const builtinConfig = this.getScannerConfigs().find((item) => item.brand === brand);
+			if (!builtinConfig) {
 				return;
 			}
 			const exists = this.configList.some((item) => {
-				return item.brand === nlscanConfig.brand || item.action === nlscanConfig.action;
+				return item.brand === builtinConfig.brand || item.action === builtinConfig.action;
 			});
 			if (exists) {
 				return;
 			}
 			const phoneIndex = this.configList.findIndex((item) => item.brand === PHONE_SCAN_BRAND);
 			if (phoneIndex >= 0) {
-				this.configList.splice(phoneIndex, 0, nlscanConfig);
+				this.configList.splice(phoneIndex, 0, builtinConfig);
 				return;
 			}
-			this.configList.push(nlscanConfig);
+			this.configList.push(builtinConfig);
+		},
+		ensureSeuicOption() {
+			this.ensureBuiltinScannerOption('seuic');
+		},
+		ensureNlscanOption() {
+			this.ensureBuiltinScannerOption('nlscan');
 		},
 		initFormFromSaved() {
 			const savedConfig = getScanConfig(this.getScannerConfigs());

src/pages/sys/workbench/index.vue

@@ -1,340 +1,284 @@
 <template>
-  <view class="wrap">
-    <common-navbar title="工作台" :showBack="false">
-      <template #right>
-        <view class="scan_box">
-          <u-icon name="scan" color="#333333" size="46" @click="handleScan"></u-icon>
+  <view class="app-center">
+    <view class="app-center__status" :style="{ height: statusBarHeight + 'px' }"></view>
+    <view class="app-center__header">
+      <text class="app-center__version">v{{ appVersion }}</text>
+      <text class="app-center__title">工作台</text>
+      <view class="app-center__setting" @click="navTo('/pages/sys/user/setting')">
+        <u-icon name="setting" color="#333333" size="34"></u-icon>
+        <text>设置</text>
+      </view>
+    </view>
+
+    <view class="app-center__grid">
+      <view
+        v-for="item in menuList"
+        :key="item.path"
+        class="menu-card"
+        :class="item.tone"
+        hover-class="menu-card--pressed"
+        @click="navTo(item.path)"
+      >
+        <image class="menu-card__bg" :src="item.bg" mode="aspectFill"></image>
+        <view class="menu-card__mask"></view>
+        <text class="menu-card__quote">“</text>
+        <view v-if="item.tag" class="menu-card__tag">
+          <text>{{ item.tag }}</text>
         </view>
-      </template>
-    </common-navbar>
-<!--    <view class="workbench-title">销售管理</view>-->
-<!--    <view class="toolbar">-->
-<!--      <u-grid class="grid" :col="4" :border="false">-->
-<!--        <u-grid-item :index="0" @click="navTo('/pages/saleship/salepickscan')">-->
-<!--          <view class="home-icon icon-color05">-->
-<!--            <i class="iconfont icon-hetongguanli"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">成品配布</view>-->
-<!--        </u-grid-item>-->
-<!--        <u-grid-item :index="1" @click="navTo('/pages/storegoods/QRBarCodeReview')">-->
-<!--          <view class="home-icon icon-color02">-->
-<!--            <i class="iconfont icon-mall-bag"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">标签检测</view>-->
-<!--        </u-grid-item>-->
-<!--      </u-grid>-->
-<!--    </view>-->
-<!--    <view class="workbench-title">成品管理</view>-->
-<!--    <view class="toolbar">-->
-<!--      <u-grid class="grid" :col="4" :border="false">-->
-<!--        <u-grid-item :index="0" @click="navTo('/pages/storegoods/dyeworksDyeback')">-->
-<!--          <view class="home-icon icon-color04">-->
-<!--            <i class="iconfont icon-finance"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">染整进仓</view>-->
-<!--        </u-grid-item>-->
-<!--        <u-grid-item :index="1" @click="navTo('/pages/storegoods/storeGoodsBusinessIn')">-->
-<!--          <view class="home-icon icon-color03">-->
-<!--            <i class="iconfont icon-mall-bag"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">成品进仓</view>-->
-<!--        </u-grid-item>-->
-<!--        <u-grid-item :index="2" @click="navTo('/pages/storegoods/storeGoodsBusinessOut')">-->
-<!--          <view class="home-icon icon-color12">-->
-<!--            <i class="iconfont icon-baoxiaodan"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">成品出仓</view>-->
-<!--        </u-grid-item>-->
-<!--        <u-grid-item @click="navTo('/pages/storegoods/storeGoodsBusinessCheck')">-->
-<!--          <view class="home-icon icon-color04">-->
-<!--            <i class="iconfont icon-shenpi"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">成品盘点</view>-->
-<!--        </u-grid-item>-->
-<!--        <u-grid-item @click="navTo('/pages/storegoods/storeGoodsBusinessStationMoveOnly')">-->
-<!--          <view class="home-icon icon-color04">-->
-<!--            <i class="iconfont icon-shenpi"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">成品移架</view>-->
-<!--        </u-grid-item>-->
-<!--        <u-grid-item @click="navTo('/pages/storegoods/storegoodsstoresearch')">-->
-<!--          <view class="home-icon icon-color04">-->
-<!--            <i class="iconfont icon-shenpi"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">成品库存</view>-->
-<!--        </u-grid-item>-->
-<!--        <u-grid-item @click="navTo('/pages/storegoods/storegoodsstoreallin')">-->
-<!--          <view class="home-icon icon-color04">-->
-<!--            <i class="iconfont icon-shenpi"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">进仓查询</view>-->
-<!--        </u-grid-item>-->
-<!--        <u-grid-item @click="navTo('/pages/storegoods/storegoodsstoreallout')">-->
-<!--          <view class="home-icon icon-color04">-->
-<!--            <i class="iconfont icon-shenpi"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">出仓查询</view>-->
-<!--        </u-grid-item>-->
-<!--      </u-grid>-->
-<!--    </view>-->
-    <view class="workbench-title">坯布管理</view>
-    <view class="toolbar">
-      <u-grid class="grid" :col="2" :border="false">
-<!--        <u-grid-item @click="navTo('/pages/storefabric/storefabricInStore')">-->
-<!--          <view class="home-icon icon-color04">-->
-<!--            <i class="iconfont icon-hetongguanli"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">坯布进仓</view>-->
-<!--        </u-grid-item>-->
-        <u-grid-item @click="navTo('/pages/storefabric/storeFabricBusinessOutList')">
-          <view class="workbench-tile tile-out" hover-class="tile-pressed">
-            <i class="iconfont icon-chucha"></i>
-            <text class="tile-label">坯布出库</text>
-          </view>
-        </u-grid-item>
-        <u-grid-item @click="navTo('/pages/storefabric/storeFabricWarehouseGroupList')">
-          <view class="workbench-tile tile-stock" hover-class="tile-pressed">
-            <i class="iconfont icon-huiyishi"></i>
-            <text class="tile-label">坯布库存</text>
-          </view>
-        </u-grid-item>
-<!--        <u-grid-item @click="navTo('/pages/storefabric/storefabricstoreallin')">-->
-<!--          <view class="home-icon icon-color05">-->
-<!--            <i class="iconfont icon-huiyishi"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">进仓查询</view>-->
-<!--        </u-grid-item>-->
-<!--        <u-grid-item @click="navTo('/pages/storefabric/storefabricstoreallout')">-->
-<!--          <view class="home-icon icon-color05">-->
-<!--            <i class="iconfont icon-huiyishi"></i>-->
-<!--          </view>-->
-<!--          <view class="grid-text">出仓查询</view>-->
-<!--        </u-grid-item>-->
-      </u-grid>
+        <view class="menu-card__body">
+          <text class="menu-card__name">{{ item.name }}</text>
+          <text class="menu-card__en">{{ item.en }}</text>
+        </view>
+        <view class="menu-card__arrow">
+          <text>›</text>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 <script>
-import CommonNavbar from "@/components/common-navbar/index";
 import scanMixin from '@/common/scanMixin.js';
 /**
  * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
  */
 export default {
-  components: {
-    CommonNavbar,
-  },
   mixins: [scanMixin],
   data() {
     return {
-      show: false,
-      head: "/static/aidex/images/head.png",
-      imgList: [
-        { image: "/static/aidex/banner/banner01.png" },
-        //{image: '/static/aidex/banner/banner02.png'},
-        //{image: '/static/aidex/banner/banner03.png'}
-      ],
-      todoCount: 3,
-      // scanReceiver 和 isPageActive 已由 scanMixin 提供
+      statusBarHeight: 20,
+      appVersion: '1.1.7',
+      menuList: [
+        {
+          name: '坯布出库',
+          en: 'FABRIC OUT',
+          tag: '出库',
+          path: '/pages/storefabric/storeFabricBusinessOutList',
+          tone: 'tone-out',
+          bg: '/static/img/workbench/fabric-out.jpg'
+        },
+        {
+          name: '坯布库存',
+          en: 'FABRIC STOCK',
+          tag: '库存',
+          path: '/pages/storefabric/storeFabricWarehouseGroupList',
+          tone: 'tone-stock',
+          bg: '/static/img/workbench/fabric-stock.jpg'
+        }
+      ]
     };
   },
 
   onLoad() {
+    const sys = uni.getSystemInfoSync();
+    this.statusBarHeight = sys.statusBarHeight || 20;
+    // #ifdef APP-PLUS
+    plus.runtime.getProperty(plus.runtime.appid, (inf) => {
+      if (inf && inf.version) {
+        this.appVersion = inf.version;
+      }
+    });
+    // #endif
     this.registerScanBroadcast(this.handleScanCode);
   },
-  // onUnload, onHide, onShow 已由 scanMixin 自动处理
 
-  computed: {
-    contentStyle() {
-      const navHeight = getStatusBarHeight() + 44;
-      return {
-        height: `${navHeight}px`,
-      };
-    },
-  },
   methods: {
-    // 自定义扫码处理回调 - 处理本页面特有的扫码逻辑
     handleScanCode(scanResult) {
-      console.log('工作台-扫码结果:', scanResult);
       const cleanResult = scanResult.trim().replace(/[\r\n]/g, '');
       uni.navigateTo({
         url: '/pages/saleship/salepickscandetail?order_no=' + cleanResult
       });
     },
-
     navTo(url) {
-      uni.navigateTo({
-        url: url,
-      });
-    },
-    imgListClick(index) {
-      console.log(`点击了第${index + 1}页图片`);
-    },
-    itemClick(index) {
-      console.log(index);
-    },
-    // 处理扫码（手动点击扫码按钮）
-    handleScan() {
-      if (this.usePhoneScanFallback) {
-        this.openPhoneScan();
-        return;
-      }
-      // #ifdef APP-PLUS || MP-WEIXIN
-      uni.scanCode({
-        scanType: ['qrCode', 'barCode'], // 同时支持二维码和条形码
-        success: (res) => {
-          console.log('扫码成功：', res);
-          const cleanResult = res.result.trim().replace(/[\r\n]/g, '');
-          uni.navigateTo({
-            url: '/pages/saleship/salepickscandetail?order_no=' + cleanResult
-          })
-        },
-        fail: (err) => {
-          console.error('扫码失败：', err);
-          uni.showToast({
-            title: '扫码失败',
-            icon: 'none'
-          });
-        }
-      });
-      // #endif
-
-      // #ifdef H5
-      uni.showToast({
-        title: "H5环境不支持扫码功能",
-        icon: "error",
-      });
-      // #endif
-    },
-    // 处理扫码成功
-    handleScanSuccess(result) {
-      try {
-        // 这里可以根据实际需求处理扫码结果
-        // 例如：验证扫码结果的格式或内容
-        if (this.validateScanResult(result)) {
-          // 扫码验证通过，执行其他逻辑
-          uni.showToast({
-            title: "执行成功",
-            icon: "success",
-          });
-        } else {
-          uni.showToast({
-            title: "无效的二维码",
-            icon: "none",
-          });
-        }
-      } catch (error) {
-        console.error("处理扫码结果失败：", error);
-        uni.showToast({
-          title: "处理失败",
-          icon: "none",
-        });
-      }
-    },
-    // registerScanBroadcast 和 unregisterScanBroadcast 已由 scanMixin 提供
-  },
+      uni.navigateTo({ url });
+    }
+  }
 };
 </script>
 <style lang="scss">
-@import "index.scss";
-
-.scan_box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  .scan_text {
-    font-size: 12px;
-    color: #2979ff;
-  }
+page {
+  background: #eef1f4;
 }
 
-.banner-box {
-  padding: 0 2%;
-  width: 96%;
-  height: 170rpx;
-  margin: 30rpx 0 30rpx;
-}
-
-.u-swiper-wrap {
-  padding: 0 10px;
-}
-
-.banner-pic {
-  width: 47%;
-  float: left;
-  display: inline-block;
-  margin: 0 1.5%;
-}
-
-.banner-pic image {
-  width: 100%;
-  height: 170rpx;
-  border-radius: 12rpx;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
-
-.u-mode-light-info {
-  background-color: #ffffff;
-  color: #666666;
-  border: 1px solid #e9ecf6;
-  font-size: 12px;
-  padding: 2px 8px;
-  position: relative;
-  top: -3px;
-}
-
-.workbench-title {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333333;
-  padding: 15px 30rpx;
-}
-
-.home-icon i.icon-tongzhi {
-  font-size: 22px;
-}
-
-.wrap .toolbar .workbench-tile {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.app-center {
+  min-height: 100vh;
+  background: #eef1f4;
   box-sizing: border-box;
-  width: 88%;
-  height: 300rpx;
-  margin: 8rpx auto 28rpx;
-  padding: 40rpx 28rpx 36rpx;
-  border-radius: 8rpx;
-  background-image: none;
 }
 
-.wrap .toolbar .tile-out {
-  background: #14343f;
+.app-center__header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 88rpx;
+  padding: 0 24rpx;
+  background: #ffffff;
+  border-bottom: 1rpx solid #e5e8ec;
 }
 
-.wrap .toolbar .tile-stock {
-  background: #7a2e24;
-}
-
-.wrap .toolbar .workbench-tile i {
-  position: static;
-  margin: 0 0 28rpx;
-  font-size: 88rpx;
+.app-center__version {
+  position: absolute;
+  left: 24rpx;
+  font-size: 24rpx;
+  color: #9aa3ad;
   line-height: 1;
-  color: #f4efe6;
-  opacity: 1;
 }
 
-.wrap .toolbar .tile-label {
+.app-center__title {
   font-size: 36rpx;
   font-weight: 700;
-  line-height: 1.2;
-  color: #f4efe6;
+  color: #1f2430;
+  letter-spacing: 2rpx;
 }
 
-.wrap .toolbar .tile-pressed {
-  opacity: 0.82;
+.app-center__setting {
+  position: absolute;
+  right: 24rpx;
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+  font-size: 26rpx;
+  color: #333333;
+}
+
+.app-center__grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 28rpx 48rpx 40rpx;
+  box-sizing: border-box;
+}
+
+.menu-card {
+  position: relative;
+  width: 310rpx;
+  height: 200rpx;
+  margin-bottom: 22rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-sizing: border-box;
+  box-shadow: 0 6rpx 14rpx rgba(20, 40, 70, 0.12);
+}
+
+.menu-card--pressed {
+  opacity: 0.88;
+  transform: scale(0.985);
+}
+
+.menu-card__bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  opacity: 0.38;
+}
+
+.menu-card__mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.menu-card__quote {
+  position: absolute;
+  left: 14rpx;
+  top: 2rpx;
+  font-size: 48rpx;
+  line-height: 1;
+  color: rgba(255, 255, 255, 0.55);
+  font-weight: 700;
+  z-index: 2;
+}
+
+.menu-card__tag {
+  position: absolute;
+  top: 14rpx;
+  right: 48rpx;
+  padding: 2rpx 12rpx;
+  border-radius: 6rpx;
+  background: #ffffff;
+  z-index: 3;
+}
+
+.menu-card__tag text {
+  font-size: 20rpx;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.menu-card__body {
+  position: absolute;
+  left: 22rpx;
+  right: 22rpx;
+  top: 50%;
+  transform: translateY(-42%);
+  z-index: 2;
+}
+
+.menu-card__name {
+  display: block;
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #ffffff;
+  line-height: 1.2;
+}
+
+.menu-card__en {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 18rpx;
+  letter-spacing: 1rpx;
+  color: rgba(255, 255, 255, 0.88);
+  line-height: 1.2;
+}
+
+.menu-card__arrow {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 48rpx;
+  height: 42rpx;
+  background: #eef1f4;
+  border-top-left-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+}
+
+.menu-card__arrow text {
+  font-size: 30rpx;
+  color: #8a93a0;
+  line-height: 1;
+  margin-top: -4rpx;
+}
+
+.tone-out {
+  background: #e14b3b;
+}
+
+.tone-out .menu-card__mask {
+  background: rgba(225, 75, 59, 0.72);
+}
+
+.tone-out .menu-card__tag text {
+  color: #e14b3b;
+}
+
+.tone-stock {
+  background: #2f78e6;
+}
+
+.tone-stock .menu-card__mask {
+  background: rgba(47, 120, 230, 0.72);
+}
+
+.tone-stock .menu-card__tag text {
+  color: #2f78e6;
 }
 </style>