From 6d06a72689eaa0612d6e2f84976757b1ddddd5fe Mon Sep 17 00:00:00 2001
From: xiaowang <xiaowang122503@gmail.com>
Date: Mon, 18 Aug 2025 00:04:55 +0800
Subject: [PATCH] =?UTF-8?q?1.0=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nailart/controller/TagInfoController.java |  27 +-
 .../java/com/nailart/dataobj/MainInfoDO.java  |   1 -
 .../com/nailart/service/TagInfoService.java   |  39 --
 .../service/impl/TagInfoServiceImpl.java      |  41 --
 na-frontend/src/components/ManTabBar.vue      |  11 +-
 na-frontend/src/components/NavBar.vue         |  16 +-
 na-frontend/src/components/TabBar.vue         |   7 +-
 na-frontend/src/main.js                       |   1 +
 na-frontend/src/pages/HomePage.vue            | 395 +++++++++++++++++-
 na-frontend/src/pages/PortfolioPage.vue       |   6 +-
 na-frontend/src/pages/man/HomeManPage.vue     | 272 +++++++++++-
 .../src/pages/man/PortfolioManPage.vue        |   4 +-
 .../src/pages/man/SampleCollectionManPage.vue |   4 +-
 na-frontend/src/pages/man/TagManPage.vue      | 225 +++++++++-
 14 files changed, 912 insertions(+), 137 deletions(-)

diff --git a/na-core/src/main/java/com/nailart/controller/TagInfoController.java b/na-core/src/main/java/com/nailart/controller/TagInfoController.java
index 8371308..af696ad 100644
--- a/na-core/src/main/java/com/nailart/controller/TagInfoController.java
+++ b/na-core/src/main/java/com/nailart/controller/TagInfoController.java
@@ -30,13 +30,13 @@ public class TagInfoController {
             respVO.setMsg("标签信息不能为空");
             return respVO;
         }
-        if (tagInfoService.saveTagInfo(tagDO) == 0) {
+        if (!tagInfoService.save(tagDO)) {
             respVO.setCode(500);
             respVO.setMsg("保存标签信息失败");
             return respVO;
         }
         respVO.setCode(200);
-        respVO.setData(tagInfoService.saveTagInfo(tagDO));
+        respVO.setData("保存标签信息成功");
         return respVO;
     }
 
@@ -48,7 +48,7 @@ public class TagInfoController {
             respVO.setMsg("标签id不能为空");
             return respVO;
         }
-        TagDO tagInfoById = tagInfoService.getTagInfoById(id);
+        TagDO tagInfoById = tagInfoService.getById(id);
         if (tagInfoById == null) {
             respVO.setCode(500);
             respVO.setMsg("查询标签信息失败");
@@ -62,7 +62,7 @@ public class TagInfoController {
     }
 
     @PostMapping("/deleteById")
-    public RespVO deleteTagInfoById(@RequestBody Long id) {
+    public RespVO deleteTagInfoById(Long id) {
 
         RespVO respVO = new RespVO();
         if (id == null) {
@@ -70,19 +70,18 @@ public class TagInfoController {
             respVO.setMsg("标签id不能为空");
             return respVO;
         }
-        TagDO tagInfoById = tagInfoService.getTagInfoById(id);
-        if (tagInfoById == null) {
+        boolean i = tagInfoService.removeById(id);
+        if (!i) {
             respVO.setCode(500);
-            respVO.setMsg("查询标签信息失败");
+            respVO.setMsg("删除标签信息失败");
             return respVO;
         }
 
         respVO.setCode(200);
-        respVO.setData(tagInfoById);
+        respVO.setData("删除标签信息成功");
         return respVO;
     }
 
-
     @PostMapping("/updateById")
     public RespVO updateTagInfoById(@RequestBody TagDO tagDO) {
         RespVO respVO = new RespVO();
@@ -91,14 +90,14 @@ public class TagInfoController {
             respVO.setMsg("标签信息不能为空");
             return respVO;
         }
-        TagDO tagInfoById = tagInfoService.getTagInfoById(tagDO.getId());
-        if (tagInfoById == null) {
+        Boolean i = tagInfoService.updateById(tagDO);
+        if (!i) {
             respVO.setCode(500);
-            respVO.setMsg("查询标签信息失败");
+            respVO.setMsg("更新标签信息失败");
             return respVO;
         }
         respVO.setCode(200);
-        respVO.setData(tagInfoById);
+        respVO.setData("更新标签信息成功");
 
         return respVO;
     }
@@ -106,7 +105,7 @@ public class TagInfoController {
     @GetMapping("/getAll")
     public RespVO getAllTagInfo() {
         RespVO respVO = new RespVO();
-        List<TagDO> allTagInfo = tagInfoService.getAllTagInfo();
+        List<TagDO> allTagInfo = tagInfoService.list();
         if (allTagInfo == null || allTagInfo.isEmpty()) {
             respVO.setCode(500);
             respVO.setMsg("获取标签信息失败");
diff --git a/na-core/src/main/java/com/nailart/dataobj/MainInfoDO.java b/na-core/src/main/java/com/nailart/dataobj/MainInfoDO.java
index c3a0225..b3787d3 100644
--- a/na-core/src/main/java/com/nailart/dataobj/MainInfoDO.java
+++ b/na-core/src/main/java/com/nailart/dataobj/MainInfoDO.java
@@ -30,7 +30,6 @@ public class MainInfoDO {
     private String introduce;
     /**
      * 状态
-     *
      */
     private Integer status;
     /**
diff --git a/na-core/src/main/java/com/nailart/service/TagInfoService.java b/na-core/src/main/java/com/nailart/service/TagInfoService.java
index 32609a9..8c04c26 100644
--- a/na-core/src/main/java/com/nailart/service/TagInfoService.java
+++ b/na-core/src/main/java/com/nailart/service/TagInfoService.java
@@ -13,43 +13,4 @@ import java.util.List;
  * @Created by 21616
  */
 public interface TagInfoService extends IService<TagDO> {
-    /**
-     * 保存标签信息
-     *
-     * @param tagDO 标签信息
-     * @return 是否成功
-     */
-    public Integer saveTagInfo(TagDO tagDO);
-
-    /**
-     * 根据id查询标签信息
-     *
-     * @param id 标签id
-     * @return 标签信息
-     */
-    public TagDO getTagInfoById(Long id);
-
-    /**
-     * 根据id删除标签信息
-     *
-     * @param id 标签id
-     * @return 是否成功
-     */
-    public Integer deleteTagInfoById(Long id);
-
-    /**
-     * 根据id更新标签信息
-     *
-     * @param tagDO 标签信息
-     * @return 是否成功
-     */
-    public Integer updateTagInfoById(TagDO tagDO);
-
-    /**
-     * 查询所有标签信息
-     *
-     * @return 标签信息列表
-     */
-    public List<TagDO> getAllTagInfo();
-
 }
diff --git a/na-core/src/main/java/com/nailart/service/impl/TagInfoServiceImpl.java b/na-core/src/main/java/com/nailart/service/impl/TagInfoServiceImpl.java
index a1ed523..ae74ac9 100644
--- a/na-core/src/main/java/com/nailart/service/impl/TagInfoServiceImpl.java
+++ b/na-core/src/main/java/com/nailart/service/impl/TagInfoServiceImpl.java
@@ -16,45 +16,4 @@ import java.util.List;
  */
 @Service
 public class TagInfoServiceImpl extends ServiceImpl<TagInfoMapper, TagDO> implements TagInfoService {
-    @Override
-    public Integer saveTagInfo(TagDO tagDO) {
-        if (tagDO == null) {
-            return 0;
-        }
-        try {
-
-            return this.saveTagInfo(tagDO);
-        } catch (Exception e) {
-            return 0;
-        }
-    }
-
-    @Override
-    public TagDO getTagInfoById(Long id) {
-        if (id == null) {
-            return null;
-        }
-        return this.getTagInfoById(id);
-    }
-
-    @Override
-    public Integer deleteTagInfoById(Long id) {
-        if (id == null) {
-            return 0;
-        }
-        return this.deleteTagInfoById(id);
-    }
-
-    @Override
-    public Integer updateTagInfoById(TagDO tagDO) {
-        if (tagDO == null) {
-            return 0;
-        }
-        return this.updateTagInfoById(tagDO);
-    }
-
-    @Override
-    public List<TagDO> getAllTagInfo() {
-        return this.list();
-    }
 }
diff --git a/na-frontend/src/components/ManTabBar.vue b/na-frontend/src/components/ManTabBar.vue
index 7dd464a..17b066c 100644
--- a/na-frontend/src/components/ManTabBar.vue
+++ b/na-frontend/src/components/ManTabBar.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="tab-bar">
-        <van-tabbar v-model="active" route :placeholder="true">
+        <van-tabbar v-model="active" route :placeholder="false">
             <van-tabbar-item replace to="/yumi">
                 <span>主页管理</span>
                 <template #icon="props">
@@ -15,7 +15,7 @@
                 <template #icon="props">
                     <img :src="props.active ? icon.active : icon.inactive" />
                 </template></van-tabbar-item>
-                <van-tabbar-item replace to="/tagManPage" icon="setting-o"><span>标签管理</span>
+            <van-tabbar-item replace to="/tagManPage" icon="setting-o"><span>标签管理</span>
                 <template #icon="props">
                     <img :src="props.active ? icon.active : icon.inactive" />
                 </template></van-tabbar-item>
@@ -44,4 +44,9 @@ export default {
     mounted() { }
 };
 </script>
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+.tab-bar {
+    max-width: 800px;
+    margin: 0 auto;
+}
+</style>
\ No newline at end of file
diff --git a/na-frontend/src/components/NavBar.vue b/na-frontend/src/components/NavBar.vue
index edd50e9..86a0aab 100644
--- a/na-frontend/src/components/NavBar.vue
+++ b/na-frontend/src/components/NavBar.vue
@@ -1,7 +1,11 @@
 <template>
     <div class="nav-bar">
-        <van-nav-bar title="屿 ● Nail" left-text="" :placeholder="true" :safe-area-inset-top="true" z-index="50" :fixed="true">
-            
+        <van-nav-bar 
+        title="屿 ● Nail" 
+        left-text="" 
+        z-index="50"
+        :placeholder="true"
+        :fixed="true">
         </van-nav-bar>
     </div>
 </template>
@@ -23,4 +27,10 @@ export default {
     mounted() { }
 };
 </script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+.nav-bar {
+    max-width: 800px;
+    margin: 0 auto;
+
+}
+</style>
\ No newline at end of file
diff --git a/na-frontend/src/components/TabBar.vue b/na-frontend/src/components/TabBar.vue
index e97608b..25ec8b6 100644
--- a/na-frontend/src/components/TabBar.vue
+++ b/na-frontend/src/components/TabBar.vue
@@ -40,4 +40,9 @@ export default {
     mounted() { }
 };
 </script>
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+.tab-bar {
+    max-width: 800px;
+    margin: 0 auto;
+}
+</style>
\ No newline at end of file
diff --git a/na-frontend/src/main.js b/na-frontend/src/main.js
index 10b75a3..3506657 100644
--- a/na-frontend/src/main.js
+++ b/na-frontend/src/main.js
@@ -73,6 +73,7 @@ Vue.config.productionTip = false;
 
 // 全局挂载 axios
 Vue.prototype.$axios = axios
+Vue.prototype.$dialog = Dialog;
 new Vue({
   router,
   render: (h) => h(App),
diff --git a/na-frontend/src/pages/HomePage.vue b/na-frontend/src/pages/HomePage.vue
index 67af7df..4a69d97 100644
--- a/na-frontend/src/pages/HomePage.vue
+++ b/na-frontend/src/pages/HomePage.vue
@@ -3,20 +3,80 @@
     <!-- 固定顶部导航栏 -->
     <NavBar class="nav-bar" />
     <div class="images">
-      <h1>轮播图区域</h1>
+      <van-swipe class="swipe" :autoplay="2000" indicator-color="white">
+        <van-swipe-item v-for="(image, index) in info.headImgs" :key="index">
+          <img fill="contain" v-lazy="image.url" />
+        </van-swipe-item>
+      </van-swipe>
+
     </div>
     <div class="info">
-      <h1>信息展示区，包含店名，营业时间，状态，地址，电话图标，微信图标</h1>
+      <div class="title">
+        <div class="name">{{ info.name }}</div>
+        <div class="environment" @click="showEnvironmentPopup = true">
+          <span>查看店内环境</span>
+        </div>
+      </div>
+      <van-divider />
+      <div class="worktime">
+        <div>{{ info.status }} {{ info.worktime }}</div>
+      </div>
+      <van-divider />
+      <div class="location">
+        <div class="left">
+          <span style="color: black; font-size: 15px;">{{ info.location }}</span>
+          <br>
+          <van-icon name="location-o" size="12" />
+          <span>距您驾车或者打车8.0公里 需10分钟</span>
+          <br>
+          <van-icon name="guide-o" size="12" />
+          <span>距离1号线微电园站1号口步行400米 需8分钟</span>
+        </div>
+        <div class="right">
+          <van-icon name="wechat" size="25" @click="clickWechatAndPhone('wechat')" />
+          <van-icon name="phone" size="25" @click="clickWechatAndPhone('phone')" />
+        </div>
+      </div>
     </div>
+    <van-divider>新品展示</van-divider>
     <div class="new">
-      <h1>新品展示</h1>
-    </div>
-    <div class="navigation">
-      <h1>暂定导航组件</h1>
+      <van-swipe class="swipe" :autoplay="2000" indicator-color="white">
+        <van-swipe-item v-for="(image, index) in info.newPortfolioImgs" :key="index">
+          <img fill="contain" v-lazy="image.url" />
+        </van-swipe-item>
+      </van-swipe>
     </div>
+    <van-popup v-model="showEnvironmentPopup" position="bottom" closeable style="height: 50vh;">
+      <div class="environment-images">
+        <van-swipe class="swipe" :autoplay="2000" indicator-color="white">
+          <van-swipe-item v-for="(image, index) in info.environmentImgs" :key="index">
+            <img fill="contain" v-lazy="image.url" />
+          </van-swipe-item>
+        </van-swipe>
+      </div>
+    </van-popup>
+
+
+    <van-overlay :show="showpublicityImg" @click="show = false">
+      <div class="wrapper" @click.stop>
+        <div class="block">
+          <img v-lazy="info.publicityImg.length > 0 ? info.publicityImg[0].url : ''" />
+          <div class="coress">
+            <van-icon name="add" @click="showpublicityImg = false" size="24" style="transform: rotate(45deg)"
+              color="white" />
+          </div>
+        </div>
+      </div>
+    </van-overlay>
+
+
+
+    <div style="height: 200px;"></div>
+
     <!-- 固定底部TabBar -->
     <TabBar class="tab-bar" />
   </div>
+
 </template>
 
 <script>
@@ -31,39 +91,350 @@ export default {
   props: {},
   data() {
     return {
+      info: {
+        id: 1,
+        headImgs: [],
+        guide: '距离1号线微电园站1号口步行400米 需8分钟',
+        wechat: '',
+        phone: '',
+        newPortfolioImgs: [],
+        locationImgs: [],
+        environmentImgs: [
 
+        ],
+        publicityImg: [],
+        status: ""
+      },
+      storageUrl: 'http://xiaowangnas.com:9000/yumiartnail',
+      showEnvironmentPopup: false,
+      showpublicityImg: false,
     };
   },
   watch: {},
   computed: {},
-  methods: {},
-  created() { },
-  mounted() { }
+  methods: {
+    async getInfo() {
+      const res = await this.$axios.get('/mainInfo/getMainInfo');
+      if (res.code == 200) {
+        this.id = res.data.id;
+        this.info.headImgs = this.convertToObjectArray(res.data.headImg.split('&&'));
+        this.info.name = res.data.name;
+        this.info.status = res.data.status == 0 ? '休息中' : '营业中';
+        this.info.worktime = res.data.worktime;
+        this.info.location = res.data.address;
+        this.info.wechat = res.data.wechat;
+        this.info.phone = res.data.phone;
+        this.info.locationImgs = this.convertToObjectArray(res.data.locationImg.split('&&'));
+        this.info.newPortfolioImgs = this.convertToObjectArray(res.data.newPortfolioImg.split('&&'));
+        this.info.environmentImgs = this.convertToObjectArray(res.data.environmentImg.split('&&'));
+        this.info.publicityImg = [{ url: this.storageUrl + res.data.publicityImg }];
+      }
+      if (this.info.publicityImg.length > 0) {
+        this.showpublicityImg = true;
+      } else {
+        this.showpublicityImg = false;
+      }
+      console.log(this.info);
+
+    },
+    convertToObjectArray(urls) {
+      return urls.map(url => {
+        if (!url) return { url: '' }; // 处理空字符串
+        const modifiedUrl = this.storageUrl + url;
+        return { url: modifiedUrl }
+      });
+    },
+    convertUrlsToString(arr) {
+      return arr.map(item => {
+        let modifiedUrl = item.url.replace(this.storageUrl, '');
+        return modifiedUrl;
+      }).join('&&');
+    },
+    clickWechatAndPhone(type) {
+      this.$dialog.confirm({
+        title: type == 'wechat' ? '微信号' : '电话号码',
+        message: type == 'wechat' ? this.info.wechat : this.info.phone,
+        confirmButtonText: '一键复制',
+      })
+        .then(() => {
+          this.textToCopy = type == 'wechat' ? this.info.wechat : this.info.phone;
+          this.handleCopy();
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    async handleCopy() {
+      try {
+        // 首先检查是否支持navigator.clipboard
+        if (navigator.clipboard) {
+          // 请求剪贴板写入权限（适用于需要权限的浏览器）
+          if ('permissions' in navigator) {
+            const permissionStatus = await navigator.permissions.query({ name: 'clipboard-write' });
+            if (permissionStatus.state === 'granted' || (permissionStatus.state === 'prompt' && await permissionStatus.request() === 'granted')) {
+              await navigator.clipboard.writeText(this.textToCopy);
+              this.$toast.success('已复制到剪贴板');
+            } else {
+              console.error('未获得剪贴板写入权限');
+              this.$toast.fail('未获得剪贴板写入权限，请手动复制');
+            }
+          } else {
+            // 如果不需要权限请求，直接复制
+            await navigator.clipboard.writeText(this.textToCopy);
+            this.$toast.success('已复制到剪贴板');
+          }
+        } else {
+          // 如果不支持navigator.clipboard，尝试使用document.execCommand（旧方法，兼容性更好但有局限性）
+          const textArea = document.createElement('textarea');
+          textArea.value = this.textToCopy;
+          document.body.appendChild(textArea);
+          textArea.select();
+          try {
+            document.execCommand('copy');
+            this.$toast.success('已复制到剪贴板');
+          } catch (err) {
+            console.error('复制失败:', err);
+            this.$toast.fail('复制失败，请手动复制');
+          }
+          document.body.removeChild(textArea);
+        }
+      } catch (err) {
+        console.error('复制失败:', err);
+        this.$toast.fail('复制失败，请手动复制');
+      }
+    },
+    // 记录当前时间到localStorage
+    recordCurrentTime(storageKey = 'recordedTime') {
+      // 获取当前时间的时间戳（毫秒）
+      const currentTime = new Date().getTime();
+      // 存储到localStorage
+      localStorage.setItem(storageKey, currentTime.toString());
+      return currentTime;
+    },
+
+    // 从localStorage获取记录的时间并计算与当前时间的差值（秒）
+    getTimeDifference(storageKey = 'recordedTime') {
+      // 从localStorage获取记录的时间
+      const storedTimeStr = localStorage.getItem(storageKey);
+
+      // 检查是否存在记录
+      if (!storedTimeStr) {
+        console.error('没有找到记录的时间');
+        return null;
+      }
+
+      // 转换为数字类型
+      const storedTime = parseInt(storedTimeStr, 10);
+
+      // 检查转换是否成功
+      if (isNaN(storedTime)) {
+        console.error('存储的时间格式不正确');
+        return null;
+      }
+
+      // 获取当前时间戳
+      const currentTime = new Date().getTime();
+
+      // 计算差值（毫秒）并转换为秒
+      const differenceInSeconds = Math.floor((currentTime - storedTime) / 1000);
+
+      return differenceInSeconds;
+    }
+  },
+  created() {
+    // 检查是否有记录的时间
+    const recordedTime = localStorage.getItem('recordedTime');
+    if (recordedTime) {
+      // 如果有记录的时间，计算与当前时间的差值
+      const timeDifference = this.getTimeDifference();
+      console.log(`与上次记录的时间差为 ${timeDifference} 秒`);
+      if (timeDifference >= 60 * 60 * 24) {
+        // 超过24小时，执行相应操作
+        this.recordCurrentTime();
+        this.showpublicityImg = true;
+      } else {
+        // 在24小时内，执行相应操作
+        console.log('在24小时内');
+        this.showpublicityImg = false;
+      }
+    } else {
+      console.log('没有找到记录的时间');
+    }
+  },
+  mounted() {
+    this.getInfo();
+  },
+  beforeDestroy() {
+    // 在组件销毁前，可以清理一些资源或状态
+    this.showEnvironmentPopup = false;
+    this.showpublicityImg = false;
+    this.recordCurrentTime();
+  }
+
 };
 </script>
 <style lang="less" scoped>
+@base-bg: #f9fafb;
+@card-bg: white;
+@text-primary: #1f2937;
+@text-secondary: #6b7280;
+@accent-color: #3b82f6;
+@accent-dark: #2563eb;
+@danger-color: #ef4444;
+@gray-light: #d1d5db;
+@shadow-base: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+@shadow-active: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
 .homepage {
   width: 100vw;
   height: 100vh;
   overflow: auto;
+  max-width: 800px;
+margin: 0 auto;
   .images {
     width: 100%;
-    height: 25vh;
+    height: 35vh;
+    overflow: hidden;
+    min-height: 200px;
+    max-height: 500px;
+
+    .swipe {
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 
   .info {
     width: 100%;
-    height: 20vh;
+    padding: 10px;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .name {
+        font-size: 40px;
+        color: @text-primary;
+        font-weight: bold;
+        cursor: pointer;
+      }
+
+      .environment {
+        cursor: pointer;
+
+        span {
+          font-size: 12px;
+          color: #525050;
+        }
+      }
+
+    }
+
+    .location {
+      display: flex;
+
+      .left {
+        width: 70%;
+
+        span {
+          font-size: 12px;
+          color: #a19e9e;
+          margin-bottom: 10px;
+
+        }
+      }
+
+      .right {
+        width: 30%;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        color: #a19e9e;
+      }
+
+
+    }
   }
 
   .new {
-    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    width: 95%;
+    height: 25vh;
+    overflow: hidden;
+    min-height: 200px;
+    max-height: 500px;
+    margin: auto;
+    border-radius: 10px;
+
+    .swipe {
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
   }
 
   .navigation {
     width: 100%;
   }
 
+  .environment-images {
+    width: 100%;
+    overflow: hidden;
+    max-height: 500px;
+
+    .swipe {
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: relative;
+    width: 100%;
+
+    .block {
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 100%;
+        object-fit: contain;
+        border-radius: 10px;
+      }
+
+      .coress {
+        padding-top: 20px;
+      }
+    }
+  }
+
+
 
 }
 </style>
\ No newline at end of file
diff --git a/na-frontend/src/pages/PortfolioPage.vue b/na-frontend/src/pages/PortfolioPage.vue
index e3627f0..0e553b4 100644
--- a/na-frontend/src/pages/PortfolioPage.vue
+++ b/na-frontend/src/pages/PortfolioPage.vue
@@ -146,6 +146,10 @@ export default {
                     for (let tagID of item.tagId.split("&&")) {
                         tagInfo.push(this.idToObjectMap[tagID])
                     }
+                    console.log(">>>>");
+                    
+                    console.log(tagInfo);
+                    
                     return {
                         id: item.id,
                         title: item.title,
@@ -346,7 +350,7 @@ export default {
 
     // 卡片容器（滚动区域）
     .cards-container {
-        padding: 0 5px;
+        padding: 10px;
         overflow: auto;
 
         // 卡片网格布局
diff --git a/na-frontend/src/pages/man/HomeManPage.vue b/na-frontend/src/pages/man/HomeManPage.vue
index eca9d58..ebe4689 100644
--- a/na-frontend/src/pages/man/HomeManPage.vue
+++ b/na-frontend/src/pages/man/HomeManPage.vue
@@ -11,8 +11,11 @@
 
     </div>
     <div class="info">
-      <div class="title" @click="showpop">
-        <div>{{ info.name }}</div>
+      <div class="title">
+        <div class="name" @click="showpop">{{ info.name }}</div>
+        <div class="environment" @click="showEnvironmentPopup = true">
+          <span>查看店内环境</span>
+        </div>
       </div>
       <van-divider />
       <div class="worktime">
@@ -30,9 +33,8 @@
           <span>距离1号线微电园站1号口步行400米 需8分钟</span>
         </div>
         <div class="right">
-          <van-icon name="wechat" size="25" />
-          <van-icon name="phone" size="25" />
-
+          <van-icon name="wechat" size="25" @click="clickWechatAndPhone('wechat')" />
+          <van-icon name="phone" size="25" @click="clickWechatAndPhone('phone')" />
         </div>
       </div>
     </div>
@@ -46,7 +48,11 @@
     </div>
 
 
-    <van-popup position="bottom" v-model="show" style="height: 80%;" closeable :close-on-click-overlay="false">
+
+    <div style="height: 200px;"></div>
+
+
+    <van-popup position="bottom" v-model="show" closeable :close-on-click-overlay="false">
       <van-form @submit="saveChangeInfo">
         <van-field name="headImgs" label="主页店图">
           <template #input>
@@ -57,7 +63,8 @@
           :rules="[{ required: true, message: '请填写店名' }]" />
         <van-field v-model="info.worktime" name="worktime" label="营业信息" placeholder="营业信息"
           :rules="[{ required: true, message: '请填写营业信息' }]" />
-        <van-field readonly clickable label="营业状态" :value="info.status" placeholder="选择营业状态" @click="showPicker = true" />
+        <van-field readonly clickable label="营业状态" :value="info.status" placeholder="选择营业状态"
+          @click="showPicker = true" />
         <van-popup v-model="showPicker" round position="bottom">
           <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onPicker" />
         </van-popup>
@@ -83,12 +90,38 @@
             <van-uploader v-model="info.environmentImgs" :after-read="uploadEnvironmentImgs" />
           </template>
         </van-field>
+        <van-field name="publicityImg" label="广告图">
+          <template #input>
+            <van-uploader v-model="info.publicityImg" :after-read="uploadPublicityImg" :max-count="1" />
+          </template>
+        </van-field>
         <div style="margin: 16px;">
           <van-button round block type="info" native-type="submit">提交</van-button>
         </div>
       </van-form>
 
     </van-popup>
+    <van-popup v-model="showEnvironmentPopup" position="bottom" closeable style="height: 50vh;">
+      <div class="environment-images">
+        <van-swipe class="swipe" :autoplay="2000" indicator-color="white">
+          <van-swipe-item v-for="(image, index) in info.environmentImgs" :key="index">
+            <img fill="contain" v-lazy="image.url" />
+          </van-swipe-item>
+        </van-swipe>
+      </div>
+    </van-popup>
+
+    <van-overlay :show="showpublicityImg" @click="show = false">
+      <div class="wrapper" @click.stop>
+        <div class="block">
+          <img v-lazy="info.publicityImg.length > 0 ? info.publicityImg[0].url : ''" />
+          <div class="coress">
+            <van-icon name="add" @click="showpublicityImg = false" size="24" style="transform: rotate(45deg)"
+              color="white" />
+          </div>
+        </div>
+      </div>
+    </van-overlay>
 
 
     <!-- 固定底部TabBar -->
@@ -118,9 +151,9 @@ export default {
         newPortfolioImgs: [],
         locationImgs: [],
         environmentImgs: [
-          
+
         ],
-        publicityImg: '',
+        publicityImg: [],
         status: ""
       },
       storageUrl: 'http://xiaowangnas.com:9000/yumiartnail',
@@ -139,6 +172,9 @@ export default {
       },
       showPicker: false,
       columns: ['营业中', '休息中'],
+      showEnvironmentPopup: false,
+      showpublicityImg: true,
+      textToCopy: '', // 要复制的文本
     };
   },
   watch: {},
@@ -146,7 +182,6 @@ export default {
   methods: {
     async getInfo() {
       const res = await this.$axios.get('/mainInfo/getMainInfo');
-      console.log(res);
       if (res.code == 200) {
         this.id = res.data.id;
         this.info.headImgs = this.convertToObjectArray(res.data.headImg.split('&&'));
@@ -159,7 +194,15 @@ export default {
         this.info.locationImgs = this.convertToObjectArray(res.data.locationImg.split('&&'));
         this.info.newPortfolioImgs = this.convertToObjectArray(res.data.newPortfolioImg.split('&&'));
         this.info.environmentImgs = this.convertToObjectArray(res.data.environmentImg.split('&&'));
+        this.info.publicityImg = [{ url: this.storageUrl + res.data.publicityImg }];
       }
+      if (this.info.publicityImg.length > 0) {
+        this.showpublicityImg = true;
+      } else {
+        this.showpublicityImg = false;
+      }
+      console.log(this.info);
+
     },
     async saveChangeInfo() {
       this.show = false;
@@ -173,6 +216,8 @@ export default {
       this.saveInfo.locationImg = this.convertUrlsToString(this.info.locationImgs);
       this.saveInfo.newPortfolioImg = this.convertUrlsToString(this.info.newPortfolioImgs);
       this.saveInfo.environmentImg = this.convertUrlsToString(this.info.environmentImgs);
+      this.saveInfo.publicityImg = this.info.publicityImg.length > 0 ? this.info.publicityImg[0].url.replace(this.storageUrl, '') : '';
+      this.saveInfo.status = this.info.status == '营业中' ? 0 : 1;
       console.log(this.saveInfo);
       const res = await this.$axios.post('/mainInfo/updateMainInfo', this.saveInfo);
       console.log(res);
@@ -197,6 +242,9 @@ export default {
     uploadEnvironmentImgs(file) {
       this.uploadImgs(file, 'environmentImgs')
     },
+    uploadPublicityImg(file) {
+      this.uploadImgs(file, 'publicityImg')
+    },
     //上传文件
     async uploadImgs(file, type) {
       try {
@@ -225,9 +273,14 @@ export default {
             this.info.environmentImgs.pop();
             this.info.environmentImgs.push({ url: result });
             break;
+          case 'publicityImg':
+            this.info.publicityImg.pop();
+            this.info.publicityImg.push({ url: result });
+            break;
           default:
             break;
         }
+        this.$toast.success('上传成功');
       } catch (error) {
         // this.uploadResult = `上传失败: ${error.message}`;
         this.$toast.fail('上传失败');
@@ -238,6 +291,7 @@ export default {
     },
     convertToObjectArray(urls) {
       return urls.map(url => {
+        if (!url) return { url: '' }; // 处理空字符串
         const modifiedUrl = this.storageUrl + url;
         return { url: modifiedUrl }
       });
@@ -249,9 +303,128 @@ export default {
       }).join('&&');
     },
     onPicker(value) {
-      this.info.status = value=='营业中'?1:0;
+      this.info.status = value == '营业中' ? 1 : 0;
       this.showPicker = false;
     },
+    clickWechatAndPhone(type) {
+      this.$dialog.confirm({
+        title: type == 'wechat' ? '微信号' : '电话号码',
+        message: type == 'wechat' ? this.info.wechat + '\n（点击一键复制后,可自动复制并跳转微信）' : this.info.phone,
+        confirmButtonText: '一键复制',
+      })
+        .then(() => {
+          this.textToCopy = type == 'wechat' ? this.info.wechat : this.info.phone;
+          this.handleCopy(type);
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    async handleCopy(type) {
+      try {
+        // 首先检查是否支持navigator.clipboard
+        if (navigator.clipboard) {
+          // 请求剪贴板写入权限（适用于需要权限的浏览器）
+          if ('permissions' in navigator) {
+            const permissionStatus = await navigator.permissions.query({ name: 'clipboard-write' });
+            if (permissionStatus.state === 'granted' || (permissionStatus.state === 'prompt' && await permissionStatus.request() === 'granted')) {
+              await navigator.clipboard.writeText(this.textToCopy);
+              this.$toast.success('已复制到剪贴板');
+            } else {
+              console.error('未获得剪贴板写入权限');
+              this.$toast.fail('未获得剪贴板写入权限，请手动复制');
+            }
+          } else {
+            // 如果不需要权限请求，直接复制
+            await navigator.clipboard.writeText(this.textToCopy);
+            this.$toast.success('已复制到剪贴板');
+          }
+        } else {
+          // 如果不支持navigator.clipboard，尝试使用document.execCommand（旧方法，兼容性更好但有局限性）
+          const textArea = document.createElement('textarea');
+          textArea.value = this.textToCopy;
+          document.body.appendChild(textArea);
+          textArea.select();
+          try {
+            document.execCommand('copy');
+            this.$toast.success('已复制到剪贴板');
+          } catch (err) {
+            console.error('复制失败:', err);
+            this.$toast.fail('复制失败，请手动复制');
+          }
+          document.body.removeChild(textArea);
+        }
+        this.handleSpecialAction(type)
+      } catch (err) {
+        console.error('复制失败:', err);
+        this.$toast.fail('复制失败，请手动复制');
+      }
+    },
+    handleSpecialAction(type) {
+      // 检查是否是微信环境
+      const isWechatEnv = /MicroMessenger/i.test(navigator.userAgent);
+
+      if (type === 'wechat') {
+        // 微信跳转处理
+        if (isWechatEnv) {
+          this.$toast.fail('请在微信外部浏览器中打开以跳转微信');
+          return;
+        }
+
+        try {
+          // 尝试打开微信
+          const wechatLink = 'weixin://';
+          const startTime = Date.now();
+
+          // 创建隐藏的iframe尝试打开协议，解决部分浏览器直接跳转失败问题
+          const iframe = document.createElement('iframe');
+          iframe.style.display = 'none';
+          iframe.src = wechatLink;
+          document.body.appendChild(iframe);
+
+          // 检查是否成功打开
+          setTimeout(() => {
+            document.body.removeChild(iframe);
+            if (Date.now() - startTime < 1000) {
+              this.$toast.fail('未检测到微信客户端，请手动打开微信');
+            } else {
+              this.$toast.info('正在打开微信...');
+            }
+          }, 800);
+        } catch (error) {
+          this.$toast.fail('打开微信失败，请手动操作');
+          console.error('微信跳转错误:', error);
+        }
+      } else if (type === 'phone') {
+        // 电话号码处理
+        if (!this.info?.phone) {
+          this.$toast.fail('电话号码不存在');
+          return;
+        }
+
+        // 标准化电话号码格式
+        const phoneNumber = this.info.phone.replace(/\s/g, '');
+        if (!/^\d{11}$/.test(phoneNumber)) {
+          this.$toast.fail('请检查电话号码格式');
+          return;
+        }
+
+        try {
+          // 检查是否在支持电话功能的环境
+          if (/Android|iPhone/i.test(navigator.userAgent)) {
+            // 移动设备直接调用拨号
+            window.location.href = `tel:${phoneNumber}`;
+            this.$toast.info(`正在拨打 ${phoneNumber}...`);
+          } else {
+            // 桌面设备提示
+            this.$toast.info(`电话号码: ${phoneNumber}\n请在手机上使用此功能`);
+          }
+        } catch (error) {
+          this.$toast.fail('拨打电话失败，请手动拨号');
+          console.error('拨打电话错误:', error);
+        }
+      }
+    }
   },
   created() { },
   mounted() {
@@ -276,10 +449,11 @@ export default {
   width: 100vw;
   height: 100vh;
   overflow: auto;
-
+max-width: 800px;
+margin: 0 auto;
   .images {
     width: 100%;
-    height: 25vh;
+    height: 35vh;
     overflow: hidden;
     min-height: 200px;
     max-height: 500px;
@@ -297,7 +471,30 @@ export default {
 
   .info {
     width: 100%;
-    padding: 20px;
+    padding: 10px;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .name {
+        font-size: 40px;
+        color: @text-primary;
+        font-weight: bold;
+        cursor: pointer;
+      }
+
+      .environment {
+        cursor: pointer;
+
+        span {
+          font-size: 12px;
+          color: #525050;
+        }
+      }
+
+    }
 
     .location {
       display: flex;
@@ -330,12 +527,13 @@ export default {
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    width: 90%;
+    width: 95%;
     height: 25vh;
     overflow: hidden;
     min-height: 200px;
     max-height: 500px;
     margin: auto;
+    border-radius: 10px;
 
     .swipe {
       width: 100%;
@@ -353,6 +551,50 @@ export default {
     width: 100%;
   }
 
+  .environment-images {
+    width: 100%;
+    overflow: hidden;
+    max-height: 500px;
+
+    .swipe {
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: relative;
+    width: 100%;
+
+    .block {
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 100%;
+        object-fit: contain;
+        border-radius: 10px;
+      }
+
+      .coress {
+        padding-top: 20px;
+      }
+    }
+  }
+
+
 
 }
 </style>
\ No newline at end of file
diff --git a/na-frontend/src/pages/man/PortfolioManPage.vue b/na-frontend/src/pages/man/PortfolioManPage.vue
index 3c4e755..f5a86d6 100644
--- a/na-frontend/src/pages/man/PortfolioManPage.vue
+++ b/na-frontend/src/pages/man/PortfolioManPage.vue
@@ -673,14 +673,14 @@ export default {
 
     // 卡片容器（滚动区域）
     .cards-container {
-        padding: 0 20px;
+        padding: 10px;
         overflow: auto;
 
         // 卡片网格布局
         .card-grid {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
-            gap: 24px;
+            gap: 10px;
 
             // // 移动端适配
             // @media (max-width: 600px) {
diff --git a/na-frontend/src/pages/man/SampleCollectionManPage.vue b/na-frontend/src/pages/man/SampleCollectionManPage.vue
index cdc6cfa..f7ce496 100644
--- a/na-frontend/src/pages/man/SampleCollectionManPage.vue
+++ b/na-frontend/src/pages/man/SampleCollectionManPage.vue
@@ -670,14 +670,14 @@ export default {
 
   // 卡片容器（滚动区域）
   .cards-container {
-    padding: 0 20px;
+    padding:10px;
     overflow: auto;
 
     // 卡片网格布局
     .card-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
-      gap: 24px;
+      gap: 10px;
 
       // // 移动端适配
       // @media (max-width: 600px) {
diff --git a/na-frontend/src/pages/man/TagManPage.vue b/na-frontend/src/pages/man/TagManPage.vue
index 552f802..6197185 100644
--- a/na-frontend/src/pages/man/TagManPage.vue
+++ b/na-frontend/src/pages/man/TagManPage.vue
@@ -2,14 +2,67 @@
     <div class="tag-man-page">
         <!-- 固定顶部导航栏 -->
         <NavBar class="nav-bar" />
+
+        <!-- 内容区域 -->
+        <div class="content">
+            <div class="tag" v-for="(tag, index) in tags" :key="index">
+                <van-tag :color="tag.tagBgColor" :text-color="tag.tagColor" size="large">{{ tag.tagName }}</van-tag>
+                <div class="btn">
+                    <van-button type="primary" size="mini" round @click="editTag(tag)">编辑</van-button>
+                    <van-button type="danger" size="mini" round @click="deleteTag(tag)">删除</van-button>
+                </div>
+            </div>
+            <div style="height: 300px;" v-if="tags.length > 10"></div>
+            <div class="addTag">
+                <van-button type="primary" @click="addNewTag" block>新增标签</van-button>
+            </div>
+        </div>
         <!-- 固定底部TabBar -->
         <ManTabBar class="tab-bar" />
+
+
+        <van-popup v-model="showPopup" closeable position="bottom" style="height: 80vh; " lazy-render
+            :close-on-click-overlay="false">
+            <div class="tagModify">
+                <van-tag :color="editTagInfo.tagBgColor" :text-color="editTagInfo.tagColor" size="large">{{
+                    editTagInfo.tagName }}</van-tag>
+            </div>
+            <div class="popup-content">
+                <van-field label="标签名" v-model="editTagInfo.tagName" placeholder="请输入标签名" />
+                <div class="colorChoose">
+                    <van-field label="字色" v-model="editTagInfo.tagColor" type="color" />
+                    <van-field label="背景色" v-model="editTagInfo.tagBgColor" type="color" />
+                </div>
+
+                <van-button type="primary" @click="saveChange" block>确认修改</van-button>
+            </div>
+
+        </van-popup>
+        <van-popup v-model="showaddPopup" closeable position="bottom" style="height: 80vh; " lazy-render
+            :close-on-click-overlay="false">
+            <div class="tagModify">
+                <van-tag :color="editTagInfo.tagBgColor" :text-color="editTagInfo.tagColor" size="large">{{
+                    editTagInfo.tagName }}</van-tag>
+            </div>
+            <div class="popup-content">
+                <van-field label="标签名" v-model="editTagInfo.tagName" placeholder="请输入标签名" />
+                <div class="colorChoose">
+                    <van-field label="字色" v-model="editTagInfo.tagColor" type="color" />
+                    <van-field label="背景色" v-model="editTagInfo.tagBgColor" type="color" />
+                </div>
+
+                <van-button type="primary" @click="saveAdd" block>确认新增</van-button>
+            </div>
+
+        </van-popup>
+
     </div>
 </template>
 
 <script>
 import NavBar from '@/components/NavBar.vue';
 import ManTabBar from '@/components/ManTabBar.vue';
+import { Dialog } from 'vant';
 export default {
     name: 'TagManPage',
     components: {
@@ -19,13 +72,179 @@ export default {
     props: {},
     data() {
         return {
+            tags: [],
+            showPopup: false,
+            editTagInfo: { tagName: '', tagBgColor: '', tagColor: '' },
+            showaddPopup: false,
         };
     },
     watch: {},
     computed: {},
-    methods: {},
+    methods: {
+        getAllTags() {
+            this.$axios.get('/tagInfo/getAll').then(res => {
+                console.log(res);
+                if (res.code === 200) {
+                    this.tags = res.data;
+                } else {
+                    this.$toast.fail('获取标签失败');
+                }
+            }).catch(() => {
+                this.$toast.fail('网络错误，请稍后再试');
+            });
+        },
+        addTag() {
+            if (this.newTagName) {
+                this.$axios.post('/tagInfo/add', {
+                    tagName: this.newTagName,
+                    tagBgColor: '#f2826a',
+                    tagColor: '#fff'
+                }).then(res => {
+                    console.log(res);
+                    if (res.code === 200) {
+                        this.$toast.success('添加标签成功');
+                    } else {
+                        this.$toast.fail('添加标签失败');
+                    }
+                }).catch(() => {
+                    this.$toast.fail('网络错误，请稍后再试');
+                });
+            }
+        },
+        editTag(tag) {
+            this.editTagInfo = JSON.parse(JSON.stringify(tag));
+            this.showPopup = true;
+        },
+        deleteTag(tag) {
+            Dialog.confirm({
+                title: '确认删除标签',
+                message: '点击取消可继续编辑',
+            }).then(() => {
+                console.log(tag);
+                this.$axios.post('/tagInfo/deleteById', null, {
+                    params: {
+                        id: tag.id
+                    }
+                }).then(res => {
+                    console.log(res);
+                    if (res.code === 200) {
+                        this.$toast.success('删除标签成功');
+                        this.getAllTags();
+                    }
+                    else {
+                        this.$toast.fail('删除标签失败');
+                    }
+                }).catch(() => {
+                    this.$toast.fail('网络错误，请稍后再试');
+                });
+
+            })
+                .catch(() => {
+
+                })
+            console.log(tag);
+        },
+        saveChange() {
+            Dialog.confirm({
+                title: '确认保存修改',
+                message: '点击取消可继续编辑',
+            }).then(() => {
+                console.log(this.editTagInfo);
+                this.$axios.post('/tagInfo/updateById', this.editTagInfo).then(res => {
+                    console.log(res);
+                    if (res.code === 200) {
+                        this.$toast.success('修改标签成功');
+                        this.showPopup = false;
+                        this.getAllTags();
+                    }
+                    else {
+                        this.$toast.fail('修改标签失败');
+                    }
+                }).catch(() => {
+                    this.$toast.fail('网络错误，请稍后再试');
+                    this.showPopup = false;
+
+                });
+
+            })
+                .catch(() => {
+                    // on cancel
+                });
+        },
+        addNewTag() {
+            this.editTagInfo = { tagName: '标签', tagBgColor: '#f2826a', tagColor: '#fff' };
+            this.showaddPopup = true;
+        },
+        saveAdd() {
+            Dialog.confirm({
+                title: '确认新增标签',
+                message: '点击取消可继续编辑',
+            }).then(() => {
+                console.log(this.editTagInfo);
+                this.$axios.post('/tagInfo/save', this.editTagInfo).then(res => {
+                    console.log(res);
+                    if (res.code === 200) {
+                        this.$toast.success('新增标签成功');
+                        this.showaddPopup = false;
+                        this.getAllTags();
+                    }
+                    else {
+                        this.$toast.fail('新增标签失败');
+                    }
+                }).catch(() => {
+                    this.$toast.fail('网络错误，请稍后再试');
+                    this.showaddPopup = false;
+
+                });
+
+            })
+                .catch(() => {
+                    // on cancel
+                });
+        },
+
+    },
     created() { },
-    mounted() { }
+    mounted() {
+        this.getAllTags();
+    }
 };
 </script>
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+.tag-man-page {
+    padding: 10px;
+    height: 100vh;
+    overflow: hidden;
+
+    .content {
+        overflow-y: auto;
+        height: calc(100vh - 110px);
+
+        .tag {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            padding: 10px;
+
+            .btn {
+                display: flex;
+            }
+        }
+    }
+
+    .tagModify {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 50px;
+        margin-top: 50px;
+    }
+
+    .colorChoose {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
+}
+</style>
\ No newline at end of file