<template>
  <page class="home-page workbench-page">
    <!-- 固定标题栏 -->
    <div class="workbench-header">
      <h1>Qdintc - 统一工作平台</h1>
    </div>
    
    <!-- 主内容区 -->
    <div class="workbench-container">
      <div class="tools-container">
        <!-- 工具分类循环渲染 -->
        <div 
          v-for="category in categories" 
          :key="category.key"
          v-show="category.tools.length > 0"
          class="tool-category"
        >
          <h2 class="category-title">{{ category.title }}</h2>
          <div class="category-items">
            <div 
              v-for="tool in category.tools" 
              :key="tool.name" 
              class="tool-card"
              @click="openTool(tool.url)"
            >
              <div class="tool-icon" :style="{background: tool.color}">
                <span class="icon-text">{{ tool.icon }}</span>
              </div>
              <div class="tool-info">
                <h4 class="tool-name">{{ tool.name }}</h4>
                <p class="tool-desc">{{ tool.desc }}</p>
                <p class="tool-url">{{ tool.displayUrl }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page>
</template>
<script>
import './less/home-page.less'
import Page from '../components/Page'

export default {
  name: 'HomePage',
  components: { Page },
  
  data() {
    return {
        // 代码管理工具
        codeTools: [
           {
            name: '禅道',
            desc: '项目管理与Bug追踪',
            url: 'http://81.70.89.108:8088',
            displayUrl: '81.70.89.108:8088',
            icon: '禅',
            color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
          },
          {
            name: 'Gitea',
            desc: 'Gitea代码仓库管理',
            url: 'http://81.70.89.108:81/user/login',
            displayUrl: '81.70.89.108:81',
            icon: 'Git',
            color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
          },
          {
            name: 'Gitee',
            desc: 'Gitee代码仓库管理',
            url: 'https://gitee.com/qdintc',
            displayUrl: 'gitee.com/qdintc',
            icon: 'GL',
            color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
          },
           {
            name: 'Minio',
            desc: 'Minio对象存储',
            url: 'http://81.70.89.108:9009',
            displayUrl: '81.70.89.108:9009',
            icon: 'MI',
            color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)'
          },
         
          {
            name: 'Harbor',
            desc: 'Docker镜像仓库',
            url: 'http://81.70.89.108:8081',
            displayUrl: '81.70.89.108:8081',
            icon: 'HB',
            color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
          }
        ],
        // 数据库工具
        databaseTools: [
          
           {
            name: 'Nocos',
            desc: 'Nocos配置管理',
            url: 'http://117.72.197.29:8088/',
            displayUrl: '117.72.197.29:8088',
            icon: 'NC',
            color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)'
          },
          
           {
            name: 'Jenkins',
            desc: '持续集成构建平台',
            url: 'http://81.70.89.108:8080/login',
            displayUrl: '81.70.89.108:8080',
            icon: 'JK',
            color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
          },
           {
            name: 'Portainer',
            desc: 'Docker容器管理',
            url: 'https://8.140.22.151:9443',
            displayUrl: '8.140.22.151:9443',
            icon: 'PT',
            color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)'
          },
          {
            name: 'NodeRed',
            desc: 'NodeRed物联数据接入',
            url: 'http://8.140.22.151:1880/',
            displayUrl: '8.140.22.151:1880',
            icon: 'NR',
            color: 'linear-gradient(135deg, #f8b500 0%, #fceabb 100%)'
          },
          {
            name: 'EMQX',
            desc: 'EMQX消息队列',
            url: 'http://8.140.22.151:28083',
            displayUrl: '8.140.22.151:28083',
            icon: 'MQ',
            color: 'linear-gradient(135deg, #e43a15 0%, #e65245 100%)'
          }
        ],
        // 
        monitorTools: [
          
        ],
        // 文档知识工具
        docTools: [
         
          {
            name: '智聪官网',
            desc: '智聪官网',
            url: 'https://www.qdintc.com',
            displayUrl: 'www.qdintc.com',
            icon: '官',
            color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)'
          },
          {
            name: '智聪记账Web',
            desc: '记账管理平台Web',
            url: 'http://152.136.151.187:8080/intc/#/login',
            displayUrl: '152.136.151.187:8080',
            icon: 'A',
            color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)'
          },
          {
            name: '智聪记账H5',
            desc: '记账管理平台H5',
            url: 'http://152.136.151.187:82/#/',
            displayUrl: '152.136.151.187:82',
            icon: 'A5',
            color: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)'
          },
          {
            name: '智聪健康Web',
            desc: '健康档案平台Web',
            url: 'http://152.136.151.187:81/hrms/login',
            displayUrl: '152.136.151.187:81',
            icon: 'H',
            color: 'linear-gradient(135deg, #96fbc4 0%, #f9f586 100%)'
          },
          {
            name: '智聪健康H5',
            desc: '健康档案平台H5',
            url: 'http://152.136.151.187:89/#/',
            displayUrl: '152.136.151.187:89',
            icon: 'H5',
            color: 'linear-gradient(135deg, #ff9966 0%, #ff5e62 100%)'
          },
          {
            name: '智聪物联网',
            desc: '智聪物联网平台',
            url: 'http://152.136.151.187:8086/login',
            displayUrl: '152.136.151.187:8086',
            icon: '物联',
            color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
          },
          {
            name: '智聪物联网大屏',
            desc: '智聪物联网大屏',
            url: 'http://152.136.151.187:8088/login',
            displayUrl: '152.136.151.187:8088',
            icon: '大屏',
            color: 'linear-gradient(135deg, #ff6b95 0%, #ffa44f 100%)'
          },
          // {
          //   name: '智聪茅台Web',
          //   desc: 'Imaotai预约平台Web',
          //   url: 'http://152.136.151.187:8081/imaotai/login',
          //   displayUrl: '152.136.151.187:8081',
          //   icon: '茅',
          //   color: 'linear-gradient(135deg, #fc6c85 0%, #f857a6 100%)'
          // },
          // {
          //   name: '智聪茅台H5',
          //   desc: 'Imaotai预约平台h5',
          //   url: 'http://152.136.151.187:90/#/',
          //   displayUrl: '152.136.151.187:90',
          //   icon: '茅5',
          //   color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
          // }
        ],
        // 测试工具
        testTools: [
            {
            name: '豆包',
            desc: '豆包AI工具',
            url: 'https://www.doubao.com/chat/',
            displayUrl: 'www.doubao.com',
            icon: '豆包',
            color: 'linear-gradient(135deg, #0ba360 0%, #3cba92 100%)'
          } ,
          {
            name: '微信公众号',
            desc: '微信公众号',
            url: 'https://mp.weixin.qq.com/cgi-bin/loginpage',
            displayUrl: 'mp.weixin.qq.com',
            icon: '微信',
            color: 'linear-gradient(135deg, #38ef7d 0%, #11998e 100%)'
          } ,
           {
            name: '腾讯云',
            desc: '腾讯云',
            url: 'https://cloud.tencent.com',
            displayUrl: 'cloud.tencent.com',
            icon: '腾讯',
            color: 'linear-gradient(135deg, #2af598 0%, #009efd 100%)'
          },
          {
            name: '阿里云',
            desc: '阿里云',
            url: 'https://www.aliyun.com',
            displayUrl: 'www.aliyun.com',
            icon: '阿里',
            color: 'linear-gradient(135deg, #f77062 0%, #fe5196 100%)'
          }
          ,
          {
            name: '京东云',
            desc: '京东云',
            url: 'https://www.jdcloud.com',
            displayUrl: 'www.jdcloud.com',
            icon: '京东',
            color: 'linear-gradient(135deg, #ee0979 0%, #ff6a00 100%)'
          }
        ],
        // 安全扫描工具
        securityTools: [
          
        ],
        // 其他工具
        otherTools: [
          {
            name: '随机密码',
            desc: '随机密码生成器',
            url: 'https://suijimimashengcheng.bmcx.com',
            displayUrl: 'bmcx.com',
            icon: '密',
            color: 'linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%)'
          },
          {
            name: '翻墙工具',
            desc: 'CordCloud',
            url: 'https://cordc.xyz/auth/login',
            displayUrl: 'cordc.xyz',
            icon: 'COR',
            color: 'linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%)'
          },
          {
            name: '图片压缩',
            desc: '图片压缩工具',
            url: 'https://squoosh.app',
            displayUrl: 'squoosh.app',
            icon: 'SQ',
            color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)'
          },
          {
            name: '2925邮箱',
            desc: '无限邮',
            url: 'https://www.2925.com/login/',
            displayUrl: 'www.2925.com',
            icon: '邮',
            color: 'linear-gradient(135deg, #ff9a56 0%, #ff5e62 100%)'
          },
          {
            name: '青岛人社',
            desc: '青岛市人力资源保障局',
            url: 'https://hrss.qingdao.gov.cn',
            displayUrl: 'hrss.qingdao.gov.cn',
            icon: '人社',
            color: 'linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)'
          },
          {
            name: '青岛公积金',
            desc: '青岛市住房公积金中心',
            url: 'https://www.qdgjj.com/',
            displayUrl: 'www.qdgjj.com',
            icon: '住房',
            color: 'linear-gradient(135deg, #9890e3 0%, #b1f4cf 100%)'
          },
          {
            name: '软著登记系统',
            desc: '中国版权保护中心',
            url: 'https://register.ccopyright.com.cn/login.html',
            displayUrl: 'ccopyright.com.cn',
            icon: '软著',
            color: 'linear-gradient(135deg, #ebc0fd 0%, #d9ded8 100%)'
          },
          {
            name: '开源软件镜像站',
            desc: '清华大学开源软件镜像站',
            url: 'https://mirrors.tuna.tsinghua.edu.cn',
            displayUrl: 'tsinghua.edu.cn',
            icon: '镜像',
            color: 'linear-gradient(135deg, #96e6a1 0%, #d4fc79 100%)'
          },
          {
            name: 'IP地址查询',
            desc: 'iP地址归属地查询',
            url: 'https://www.ip138.com/',
            displayUrl: 'www.ip138.com',
            icon: 'IP',
            color: 'linear-gradient(135deg, #accbee 0%, #e7f0fd 100%)'
          }
        ],
        // 空分类占位
        ciTools: [],
        projectTools: [],
        monitorTools: [],
        securityTools: [],
        cloudTools: []
      }
    },
  
  computed: {
    // 分类配置（统一管理）
    categories: function() {
      return [
        { key: 'doc', title: '智聪科技', tools: this.docTools },
        { key: 'code', title: '管理工具', tools: this.codeTools },
        { key: 'database', title: '开发工具', tools: this.databaseTools },
        { key: 'test', title: '第三方服务', tools: this.testTools },
        { key: 'other', title: '其他工具', tools: this.otherTools }
      ]
    }
  },
  
  created() {
    this.init()
  },
  
  methods: {
    /**
     * 打开工具链接
     * @param {string} url - 工具访问地址
     */
    openTool: function(url) {
      if (url && url !== 'http://your-gitea-url.com') {
        window.open(url, '_blank')
      } else {
        alert('请先配置该工具的访问地址')
      }
    }
  }
}
</script>
<style scoped lang="less">
// 颜色变量
@primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@white-color: #fff;
@text-primary: #333;
@text-secondary: #666;
@text-tertiary: #999;

// 尺寸变量
@header-height: 76px;
@card-width: 240px;
@icon-size: 60px;
@border-radius-lg: 12px;
@border-radius-md: 10px;

// 间距变量
@spacing-sm: 10px;
@spacing-md: 20px;
@spacing-lg: 30px;

// 页面主体
.workbench-page {
  min-height: 100vh;
  background: @primary-gradient;
  padding: @header-height 0 0;
}

.workbench-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 20px @spacing-md;
}

.workbench-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  padding: @spacing-md 0;
  background: @primary-gradient;
  z-index: 1000;
  
  h1 {
    font-size: 32px;
    font-weight: 700;
    color: @white-color;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
}

.tools-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px @spacing-md;
  align-items: flex-start;
}

.tool-category {
  flex: 0 1 auto;
  
  .category-title {
    font-size: 20px;
    font-weight: 600;
    color: @white-color;
    margin-bottom: @spacing-sm;
    padding-left: 12px;
    border-left: 4px solid rgba(255, 255, 255, 0.8);
    line-height: 1.5;
  }
  
  .category-items {
    display: flex;
    flex-wrap: wrap;
    gap: @spacing-sm;
  }
}

.tool-card {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: @border-radius-md;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: @card-width;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    background: @white-color;
  }
}

.tool-icon {
  width: @icon-size;
  height: @icon-size;
  border-radius: @border-radius-lg;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  
  .icon-text {
    font-size: 24px;
    font-weight: bold;
    color: @white-color;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
}

.tool-info {
  flex: 1;
  min-width: 0;
}

.tool-name {
  font-size: 18px;
  font-weight: 600;
  color: @text-primary;
  margin: 0 0 4px;
}

.tool-desc {
  font-size: 13px;
  color: @text-secondary;
  margin: 0 0 4px;
}

.tool-url {
  font-size: 12px;
  color: @text-tertiary;
  font-family: 'Consolas', 'Monaco', monospace;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 响应式布局 - 平板
@media (max-width: 1024px) {
  .tools-container {
    gap: 25px @spacing-lg;
  }
  
  .tool-category {
    flex-direction: column;
    width: 100%;
    
    .category-title {
      width: auto;
      text-align: left;
      padding: 10px 12px;
    }
    
    .category-items {
      width: 100%;
    }
  }
  
  .tool-card {
    width: calc(50% - 8px);
  }
  
  .workbench-header h1 {
    font-size: 36px;
  }
}

// 响应式布局 - 手机
@media (max-width: 600px) {
  .workbench-container {
    padding: @spacing-lg @spacing-sm;
  }
  
  .workbench-header {
    margin-bottom: @spacing-lg;
    
    h1 {
      font-size: 28px;
    }
  }
  
  .tools-container {
    gap: @spacing-md;
  }
  
  .tool-category {
    .category-title {
      font-size: 16px;
      padding: 8px 10px;
    }
  }
  
  .tool-card {
    padding: 14px;
    width: 100%;
  }
  
  .tool-icon {
    width: 50px;
    height: 50px;
    margin-right: 12px;
    
    .icon-text {
      font-size: 20px;
    }
  }
  
  .tool-name {
    font-size: 16px;
  }
  
  .tool-desc {
    font-size: 12px;
  }
}
</style>
