-
-
![]()
-
- {{ card.tag }}
-
+
+
+
+
-
-
-
{{ card.title }}
-
{{ card.description }}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ card.title }}
+
{{ card.description }}
+
+ {{ card.tag }}
+
+
+
+
+
+
-
-
-
\ No newline at end of file
diff --git a/na-frontend/src/pages/SampleCollectionPage.vue b/na-frontend/src/pages/SampleCollectionPage.vue
index ac5d258..142939f 100644
--- a/na-frontend/src/pages/SampleCollectionPage.vue
+++ b/na-frontend/src/pages/SampleCollectionPage.vue
@@ -1,6 +1,41 @@
-
Sample Collection Page
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ card.tag }}
+
+
+
+
+
{{ card.title }}
+
{{ card.description }}
+
+
+
+
+
@@ -10,16 +45,277 @@ export default {
components: {},
props: {},
data() {
+
return {
+ cards: [
+ {
+ title: "探索自然之美",
+ description: "深入原始森林，感受大自然的鬼斧神工。这里有清澈的溪流、茂密的树木和各种珍稀野生动物。",
+ images: ["https://picsum.photos/seed/card1/600/800", "https://picsum.photos/seed/card2/600/800"],
+
+ tag: "热门",
+ tagStyle: {
+ backgroundColor: "#F97316",
+ color: "#fff"
+ },
+ status: 0,
+ employee: "小吕&&寒冰射手",
+ neddTime: 2.0
+ }
+ ],
+ activeCardIndex: -1
};
},
watch: {},
computed: {
-
+
+ },
+ methods: {
+ handleTouchStart(index) {
+ this.activeCardIndex = index;
+ },
+
+ handleTouchEnd() {
+ setTimeout(() => {
+ this.activeCardIndex = -1;
+ }, 300);
+ },
+
+ handleCardClick(card) {
+ console.log('点击了卡片:', card.title);
+ },
+
+ handleButtonClick(card) {
+ console.log('点击了了解更多:', card.title);
+ },
+
+
+ },
+ mounted() {
+ // 处理按钮触摸反馈
+ const buttons = document.querySelectorAll('.card-button');
+ buttons.forEach(button => {
+ button.addEventListener('touchstart', () => {
+ button.classList.add('button-active');
+ });
+
+ button.addEventListener('touchend', () => {
+ setTimeout(() => {
+ button.classList.remove('button-active');
+ }, 200);
+ });
+ });
},
- methods: {},
created() { },
- mounted() { }
+
};
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/na-frontend/src/utils/request.js b/na-frontend/src/utils/request.js
new file mode 100644
index 0000000..d364fc4
--- /dev/null
+++ b/na-frontend/src/utils/request.js
@@ -0,0 +1,66 @@
+import axios from 'axios'
+
+// 创建 axios 实例
+const service = axios.create({
+ baseURL: "http://127.0.0.1:8090/api",
+ timeout: 10000
+})
+
+// 存储请求的防抖定时器（key: 请求标识, value: 定时器ID）
+const debounceTimers = new Map();
+// 防抖时间（毫秒，可根据需求调整）
+const DEBOUNCE_DELAY = 500;
+
+// 生成请求唯一标识（URL + 参数 + 方法）
+const getRequestKey = (config) => {
+ const { url, method, params, data } = config;
+ // 序列化参数，确保相同参数生成相同key
+ const paramsStr = params ? JSON.stringify(params) : '';
+ const dataStr = data ? JSON.stringify(data) : '';
+ return `${method}:${url}:${paramsStr}:${dataStr}`;
+};
+// 请求拦截器：添加防抖逻辑
+service.interceptors.request.use(
+ config => {
+ // 1. 检查POST请求体和参数是否都为空
+ if (config.method === 'post') {
+ // 检查请求体是否为空
+ const bodyEmpty =
+ config.data === undefined ||
+ config.data === null ||
+ (typeof config.data === 'object' && Object.keys(config.data).length === 0) ||
+ (typeof config.data === 'string' && config.data.trim().length === 0);
+
+ // 检查URL参数是否为空
+ const paramsEmpty =
+ config.params === undefined ||
+ config.params === null ||
+ (typeof config.params === 'object' && Object.keys(config.params).length === 0);
+
+ // 如果请求体和参数都为空，则打印提示
+ if (bodyEmpty && paramsEmpty) {
+ console.log('提示：POST请求的请求体和参数均为空');
+ }
+ }
+
+ // 2. 防抖逻辑
+ return new Promise((resolve) => {
+ const requestKey = getRequestKey(config);
+ // 清除之前的定时器
+ if (debounceTimers.has(requestKey)) {
+ clearTimeout(debounceTimers.get(requestKey));
+ }
+ // 设置新定时器
+ const timer = setTimeout(() => {
+ debounceTimers.delete(requestKey);
+ resolve(config); // 延迟后执行请求
+ }, DEBOUNCE_DELAY);
+ debounceTimers.set(requestKey, timer);
+ });
+ },
+ error => {
+ console.error('请求拦截器错误：', error);
+ return Promise.reject(error);
+ }
+);
+export default service;
\ No newline at end of file
diff --git a/na-frontend/vue.config.js b/na-frontend/vue.config.js
index 04e094b..fa96251 100644
--- a/na-frontend/vue.config.js
+++ b/na-frontend/vue.config.js
@@ -2,7 +2,7 @@ const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
- host: 'localhost',
+ host: '0.0.0.0',
port: 8080,
historyApiFallback: true,
allowedHosts: "all"