✨ feat: 首页增加销售看板

2025-08-22 14:28:10 +08:00
parent 76926c3a10
commit 9361f0ea8d
9 changed files with 668 additions and 67 deletions
--- a/klp-ui/src/views/components/AllApplications.vue
+++ b/klp-ui/src/views/components/AllApplications.vue
@@ -1,7 +1,50 @@
 <template>
  <div class="all-applications-container">
-    <h3 class="title">全部应用</h3>
-    <el-tabs v-model="activeTabName" class="app-tabs">
+    <!-- 常用应用区域 -->
+    <div class="frequently-used-section">
+      <div class="frequently-used-header">
+        <h3 class="frequently-title">常用应用</h3>
+        <el-button 
+          type="text" 
+          size="small" 
+          class="edit-btn"
+          @click="isEditingFavorites = !isEditingFavorites"
+        >
+          {{ isEditingFavorites ? '完成' : '编辑' }}
+        </el-button>
+      </div>
+      
+      <div class="frequently-used-grid" v-if="frequentlyUsedApps.length > 0">
+        <div
+          v-for="app in frequentlyUsedApps"
+          :key="`fav-${app.parentPath}-${app.childPath}`"
+          class="frequently-app-item"
+          @click="handleAppClick(getParentMenu(app.parentPath), getChildMenu(app.parentPath, app.childPath))"
+        >
+          <div class="app-icon-wrapper">
+            <svg-icon :icon-class="getChildMenu(app.parentPath, app.childPath).meta.icon || 'documentation'" class="app-icon" />
+          </div>
+          <span class="app-name">{{ getChildMenu(app.parentPath, app.childPath).meta.title }}</span>
+          
+          <!-- 删除按钮 - 仅在编辑模式显示 -->
+          <div 
+            class="remove-btn" 
+            v-if="isEditingFavorites"
+            @click.stop="removeFromFavorites(app.parentPath, app.childPath)"
+          >
+            <i class="el-icon-close"></i>
+          </div>
+        </div>
+      </div>
+
+      <div v-else>
+        <el-empty description="暂无常用应用" />
+      </div>
+    </div>
+
+    <!-- 原有全部应用区域 -->
+    <h3 class="title" v-if="isEditingFavorites">全部应用</h3>
+    <el-tabs v-model="activeTabName" class="app-tabs" v-if="isEditingFavorites">
      <el-tab-pane
        v-for="menu in filteredMenus"
        :key="menu.path"
@@ -13,10 +56,27 @@
            v-for="child in menu.children"
            :key="child.path"
            class="app-item"
-            @click="handleAppClick(menu, child)"
          >
+          <!-- @click="handleAppClick(menu, child)" -->
            <div class="app-icon-wrapper">
              <svg-icon :icon-class="child.meta.icon || 'documentation'" class="app-icon" />
+              
+              <!-- 添加到常用按钮 -->
+              <div 
+                class="add-to-favorite-btn"
+                @click.stop="addToFavorites(menu.path, child.path)"
+                v-if="!isInFavorites(menu.path, child.path)"
+              >
+                <i class="el-icon-star-off"></i>
+              </div>
+              
+              <!-- 已在常用中的标识 -->
+              <div 
+                class="in-favorite-indicator"
+                v-if="isInFavorites(menu.path, child.path)"
+              >
+                <i class="el-icon-star-on"></i>
+              </div>
            </div>
            <span class="app-name">{{ child.meta.title }}</span>
          </div>
@@ -35,14 +95,16 @@ export default {
  data() {
    return {
      allMenus: [],
-      activeTabName: ''
+      activeTabName: '',
+      frequentlyUsedApps: [], // 存储常用应用
+      isEditingFavorites: false // 是否处于编辑常用应用模式
    }
  },
  computed: {
    filteredMenus() {
      const filterHidden = (menus) => {
        return menus
-          .filter(menu => menu.hidden !== true)
+          .filter(menu => menu.hidden!== true)
          .map(menu => {
            if (menu.children) {
              menu.children = filterHidden(menu.children)
@@ -58,6 +120,7 @@ export default {
  },
  created() {
    this.fetchMenus()
+    this.loadFrequentlyUsedApps()
  },
  methods: {
    fetchMenus() {
@@ -68,7 +131,72 @@ export default {
        }
      })
    },
+    
+    // 加载常用应用（从localStorage）
+    loadFrequentlyUsedApps() {
+      const saved = localStorage.getItem('frequentlyUsedApps')
+      if (saved) {
+        try {
+          this.frequentlyUsedApps = JSON.parse(saved)
+        } catch (e) {
+          console.error('Failed to parse frequently used apps', e)
+          this.frequentlyUsedApps = []
+        }
+      }
+    },
+    
+    // 保存常用应用到localStorage
+    saveFrequentlyUsedApps() {
+      localStorage.setItem('frequentlyUsedApps', JSON.stringify(this.frequentlyUsedApps))
+    },
+    
+    // 添加到常用应用
+    addToFavorites(parentPath, childPath) {
+      if (!this.isInFavorites(parentPath, childPath)) {
+        // 限制最多10个常用应用
+        if (this.frequentlyUsedApps.length >= 10) {
+          this.$message.warning('常用应用最多只能添加10个')
+          return
+        }
+        
+        this.frequentlyUsedApps.unshift({ parentPath, childPath })
+        this.saveFrequentlyUsedApps()
+        this.$message.success('已添加到常用应用')
+      }
+    },
+    
+    // 从常用应用中移除
+    removeFromFavorites(parentPath, childPath) {
+      this.frequentlyUsedApps = this.frequentlyUsedApps.filter(
+        app =>!(app.parentPath === parentPath && app.childPath === childPath)
+      )
+      this.saveFrequentlyUsedApps()
+    },
+    
+    // 检查应用是否在常用列表中
+    isInFavorites(parentPath, childPath) {
+      return this.frequentlyUsedApps.some(
+        app => app.parentPath === parentPath && app.childPath === childPath
+      )
+    },
+    
+    // 根据路径获取父菜单
+    getParentMenu(parentPath) {
+      return this.filteredMenus.find(menu => menu.path === parentPath)
+    },
+    
+    // 根据路径获取子菜单
+    getChildMenu(parentPath, childPath) {
+      const parent = this.getParentMenu(parentPath)
+      if (parent && parent.children) {
+        return parent.children.find(child => child.path === childPath)
+      }
+      return null
+    },
+    
    handleAppClick(parentMenu, childMenu) {
+      if (!childMenu) return
+      
      const basePath = parentMenu.path
      const fullPath = path.resolve(basePath, childMenu.path)
      this.$router.push(fullPath)
@@ -80,23 +208,73 @@ export default {
 <style lang="scss" scoped>
 .all-applications-container {
  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-top: 20px;
+  padding: 16px; /* 调整间距，更贴近飞书紧凑感 */
+  border-radius: 12px; /* 飞书常用较大圆角 */
+  margin-top: 24px;
 }

+// 常用应用样式
+.frequently-used-section {
+  margin-bottom: 32px; /* 增大间距 */
+  padding-bottom: 20px;
+  border-bottom: 1px solid #ebeef5; /* 飞书浅灰边框色 */
+}
+
+.frequently-used-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  // margin-bottom: 20px;
+}
+
+.frequently-title {
+  font-size: 16px; /* 稍小字体，飞书风格更简洁 */
+  font-weight: 500; /* 调整 FontWeight */
+  color: #1f2329; /* 深一点的标题色 */
+}
+
+.edit-btn {
+  color: #0078ff; /* 飞书常用的主题蓝 */
+  padding: 0;
+  font-size: 14px;
+}
+
+.frequently-used-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); /* 调整卡片宽度 */
+  gap: 20px; /* 增大间距 */
+}
+
+.frequently-app-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  padding: 16px; /* 调整内边距 */
+  border-radius: 12px; /* 大圆角 */
+  transition: all 0.3s ease;
+  position: relative;
+  background-color: #f7f8fa; /* 飞书卡片常用浅灰底色 */
+
+  &:hover {
+    background-color: #eaeef7; /*  hover 时的浅灰 */
+  }
+}
+
+// 全部应用标题
 .title {
-  font-size: 18px;
-  font-weight: 600;
-  margin-bottom: 16px;
-  color: #303133;
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 20px;
+  color: #1f2329;
 }

+// 应用网格布局
 .app-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 20px;
-  padding-top: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); /* 调整卡片宽度 */
+  gap: 24px; /* 增大间距 */
+  padding-top: 16px;
 }

 .app-item {
@@ -104,37 +282,110 @@ export default {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
-  padding: 10px;
-  border-radius: 8px;
+  padding: 16px; 
+  border-radius: 12px; 
  transition: background-color 0.3s ease;
+  position: relative;
+  background-color: #f7f8fa; 

  &:hover {
-    background-color: #f5f7fa;
+    background-color: #eaeef7; 
  }
 }

+// 应用图标样式
 .app-icon-wrapper {
-  width: 56px;
-  height: 56px;
-  border-radius: 12px;
+  width: 48px; /* 稍小图标容器 */
+  height: 48px;
+  border-radius: 10px; /* 图标容器圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
-  margin-bottom: 10px;
-  background-color: #f0f5ff;
+  margin-bottom: 12px;
+  background-color: #e6f0ff; /* 飞书风格的浅蓝底色 */
+  position: relative;
 }

 .app-icon {
-  font-size: 28px;
-  color: #409eff;
+  font-size: 24px; /* 调整图标大小 */
+  color: #0078ff; /* 主题蓝 */
 }

+// 应用名称样式
 .app-name {
-  font-size: 14px;
-  color: #606266;
+  font-size: 14px; 
+  color: #515767; /* 飞书常用的文本色 */
  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
 }

+// 添加到常用按钮
+.add-to-favorite-btn {
+  position: absolute;
+  bottom: 4px; 
+  right: 4px; 
+  width: 24px; /* 稍大按钮 */
+  height: 24px;
+  border-radius: 6px; /* 小圆角 */
+  background-color: rgba(255, 255, 255, 0.9); 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 14px; 
+  color: #c0c4cc;
+  transition: all 0.2s;
+
+  &:hover {
+    color: #ffb400; /* 飞书常用的强调色 */
+    background-color: #fff;
+  }
+}
+
+// 已在常用中的标识
+.in-favorite-indicator {
+  position: absolute;
+  bottom: 4px; 
+  right: 4px; 
+  width: 24px; 
+  height: 24px;
+  border-radius: 6px; 
+  background-color: rgba(255, 255, 255, 0.9); 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px; 
+  color: #ffb400; 
+}
+
+// 删除常用应用按钮
+.remove-btn {
+  position: absolute;
+  top: -6px; 
+  right: -6px; 
+  width: 24px; 
+  height: 24px;
+  border-radius: 6px; 
+  background-color: #ff4d4f; /* 飞书删除按钮红 */
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 14px; 
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: #ff3839; 
+    transform: scale(1.05); 
+  }
+}
+
+// 标签页样式
 ::v-deep .el-tabs__header {
  margin-bottom: 0;
 }
@@ -142,8 +393,4 @@ export default {
 ::v-deep .el-tabs__nav-wrap::after {
  height: 1px;
 }
-
-::v-deep .el-tabs__item {
-  font-size: 15px;
-}
-</style> 
+</style>