@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/Apply/AIApplyIndex.vue

@@ -0,0 +1,458 @@
+<template>
+  <div ref="container" class="container" :style="style">
+    <!-- 头部区域 -->
+    <div class="header-banner">
+      <h1 class="header-title">欢迎来到AI智能办事大厅</h1>
+      <div class="header-search">
+        <el-input
+          v-model="keyword"
+          clearable
+          size="large"
+          placeholder="搜索您想办理的事项"
+          @change="getModelList"
+        >
+          <template v-slot:append><el-button icon="el-icon-search" @click="getModelList"></el-button></template>
+        </el-input>
+      </div>
+    </div>
+
+    <!-- 分类标签 -->
+    <div class="category-tabs">
+      <div
+        :class="['category-tab', { 'is-active': activeSystem === 'all' }]"
+        @click="activeSystem = 'all'"
+      >
+        全部
+      </div>
+      <div
+        v-for="(sys, index) in systemList"
+        :key="index"
+        :class="['category-tab', { 'is-active': activeSystem === sys.SYSTEM }]"
+        @click="activeSystem = sys.SYSTEM"
+      >
+        {{ sys['SYSTEM#'] }}
+      </div>
+    </div>
+
+    <!-- 内容区域 -->
+    <div class="content-area">
+      <!-- 标题栏 -->
+      <div class="content-header">
+        <h2 class="content-title">
+          <i class="el-icon-menu"></i>
+          {{ activeSystem === 'all' ? '全部' : (systemList.find(s => s.SYSTEM === activeSystem) || {})['SYSTEM#'] }}
+        </h2>
+        <span class="content-count" v-if="modelList">共 {{ modelList.length }} 个AI智能办事流程</span>
+      </div>
+
+      <!-- 应用列表 -->
+      <div v-if="!modelList" class="loading-state"></div>
+      <div class="null-data" v-else-if="modelList.length === 0">
+        <i class="epx-icon-color-kong"></i>
+        <p>暂无AI办事流程</p>
+      </div>
+      <ul v-else class="apply-list">
+        <li class="apply-item" v-for="item in modelList" :key="item.ID" @click="openModelPage(item)">
+          <i :style="{color: item.ICON_COLOR || '#1565c0'}" :class="['apply-icon', item.ICON || 'epx-icon-apply']"></i>
+          <p class="apply-title">{{ item.NAME }}</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { component } from '@epxing/core/src/mixins'
+export default {
+  name: 'epx-ai-apply-list',
+  mixins: [component],
+  computed: {
+    style () {
+      return this.$component.style || {}
+    }
+  },
+  data () {
+    return {
+      keyword: '',
+      activeSystem: 'all',
+      systemList: [],
+      modelList: null
+    }
+  },
+  watch: {
+    activeSystem () {
+      this.getModelList()
+    }
+  },
+  methods: {
+    // 获取系统分类列表
+    getSystemList () {
+      this.$http.list({
+        entityId: 'ACT_RE_MODEL',
+        'scope.AI_USE': '1',
+        group_field: 'SYSTEM',
+        columnFieldNames: 'SYSTEM#'
+      })
+        .then(data => {
+          // 按SYSTEM去重
+          const entitys = data.entitys || []
+          const uniqueMap = new Map()
+          entitys.forEach(item => {
+            if (!uniqueMap.has(item.SYSTEM)) {
+              uniqueMap.set(item.SYSTEM, item)
+            }
+          })
+          this.systemList = Array.from(uniqueMap.values())
+        })
+    },
+    // 获取AI流程列表
+    getModelList () {
+      const params = {
+        entityId: 'ACT_RE_MODEL',
+        'scope.AI_USE': '1',
+        order_field: 'ORDER_NUM',
+        order_mode: 'asc'
+      }
+      if (this.activeSystem !== 'all') {
+        params['search.SYSTEM'] = this.activeSystem
+      }
+      if (this.keyword) {
+        params['search.NAME#like'] = this.keyword
+      }
+      this.$http.list(params)
+        .then(data => {
+          this.modelList = data.entitys
+        })
+    },
+    // 打开流程页面 - 发送消息给AI
+    openModelPage (model) {
+      const message = `我要发起${model.NAME}`
+      // 发送事件给AI对话组件
+      const sendMessage = this.$query?.sendMessage
+      if (sendMessage) {
+        sendMessage(message)
+        this.$query?.closePage?.()
+      }
+    }
+  },
+  created () {
+    this.getModelList()
+    this.getSystemList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: 100%;
+  overflow: auto;
+  background: var(--epx-bg) url('@/assets/topbg.webp') no-repeat top center;
+  background-size: 100% auto;
+}
+
+/* 头部横幅 */
+.header-banner {
+  padding: 60px 20px 100px;
+  text-align: center;
+  position: relative;
+}
+
+.header-title {
+  color: #fff;
+  font-size: 28px;
+  font-weight: 500;
+  margin: 0 0 28px 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  letter-spacing: 2px;
+}
+
+.header-search {
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+
+   :deep(.el-input-group) {
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    border-radius: var(--epx-radius-l);
+    overflow: hidden;
+  }
+
+   // EP 的输入框盒子是 .el-input__wrapper，.el-input__inner 只是里面的裸 <input>
+   // （element-ui 时代反过来）。高度打在 __inner 上 → 实际框高 = 值 + wrapper 上下各 1px，
+   // 且 --el-input-height 仍停在默认 32px，__prefix/__suffix/清除按钮的行高都按它算。
+   :deep(.el-input) {
+     --el-input-height: 50px;
+   }
+   // 内边距同理：加在裸 <input> 上会与 wrapper 自带的 11px **叠加**，搬到 wrapper 才是原意
+   :deep(.el-input__wrapper) {
+     padding: 1px 20px 1px 28px;
+   }
+   :deep(.el-input__inner) {
+    border: none;
+    font-size: 15px;
+    background: var(--epx-bg-card);
+  }
+
+   :deep(.el-input-group__append) {
+    background: #1e88e5;
+    border: none;
+    padding: 0;
+
+    .el-button {
+      background: transparent;
+      border: none;
+      color: #fff;
+      font-size: var(--epx-font-size-xl);
+      padding: 0 32px;
+      height: 50px;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+
+/* 分类标签 */
+.category-tabs {
+  display: flex;
+  justify-content: flex-start;
+  gap: 12px;
+  padding: 16px 24px;
+  background: var(--epx-bg-card);
+  margin: -50px 20px 20px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  position: relative;
+  z-index: 2;
+  flex-wrap: wrap;
+}
+
+.category-tab {
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+  transition: all 0.3s;
+  white-space: nowrap;
+  background: var(--epx-bg);
+
+  &:hover {
+    color: #1565c0;
+    background: #e3f2fd;
+  }
+
+  &.is-active {
+    background: #1565c0;
+    color: #fff;
+    font-weight: 500;
+  }
+}
+
+/* 内容区域 */
+.content-area {
+  padding: 0 20px 20px;
+}
+
+.content-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  padding: 0 4px;
+}
+
+.content-title {
+  font-size: var(--epx-font-size-l);
+  font-weight: 600;
+  color: var(--epx-text);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  i {
+    color: #1565c0;
+  }
+}
+
+.content-count {
+  font-size: 13px;
+  color: var(--epx-text-secondary);
+}
+
+/* 应用列表 */
+.apply-list {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 16px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.apply-item {
+  background: rgba(255,255,255,0.8);
+  border-radius: var(--epx-radius-l);
+  border: 1px solid var(--epx-border);
+  padding: 28px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    background: rgba(255,255,255,1);
+  }
+}
+
+.apply-icon {
+  font-size: 30px;
+  margin-bottom: 14px;
+  line-height: 1;
+}
+
+.apply-title {
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+  text-align: center;
+  line-height: 1.5;
+  margin: 0;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 空数据状态 */
+.null-data {
+  text-align: center;
+  padding: 100px 20px;
+  color: var(--epx-text-secondary);
+
+  i {
+    font-size: 120px;
+    display: block;
+    margin-bottom: 20px;
+    opacity: 0.5;
+  }
+
+  p {
+    font-size: var(--epx-font-size-l);
+    margin: 0;
+  }
+}
+
+.loading-state {
+  text-align: center;
+  padding: 100px 20px;
+}
+
+/* 响应式布局 */
+@media screen and (max-width: 1600px) {
+  .apply-list {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .apply-list {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .header-title {
+    font-size: 22px;
+  }
+
+  .apply-list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .category-tabs {
+    margin: -45px 10px 10px;
+  }
+
+  .content-area {
+    padding: 0 10px 10px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .header-banner {
+    padding: 40px 15px 70px;
+  }
+
+  .header-title {
+    font-size: 18px;
+    letter-spacing: 1px;
+  }
+
+  .header-search {
+    max-width: 90%;
+
+     // EP 的输入框盒子是 .el-input__wrapper，.el-input__inner 只是里面的裸 <input>
+     // （element-ui 时代反过来）。高度打在 __inner 上 → 实际框高 = 值 + wrapper 上下各 1px，
+     // 且 --el-input-height 仍停在默认 32px，__prefix/__suffix/清除按钮的行高都按它算。
+     :deep(.el-input) {
+       --el-input-height: 44px;
+     }
+     // 内边距同理：加在裸 <input> 上会与 wrapper 自带的 11px **叠加**，搬到 wrapper 才是原意
+     :deep(.el-input__wrapper) {
+       padding-left: 20px;
+     }
+     :deep(.el-input__inner) {
+      font-size: var(--epx-font-size-base);
+    }
+
+     :deep(.el-input-group__append .el-button) {
+      height: 44px;
+      padding: 0 24px;
+      font-size: 18px;
+    }
+  }
+
+  .category-tabs {
+    gap: 8px;
+    padding: 14px 16px;
+    margin: -40px 10px 10px;
+  }
+
+  .category-tab {
+    padding: 6px 14px;
+    font-size: 13px;
+  }
+
+  .apply-list {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+  }
+
+  .apply-item {
+    padding: 20px 10px;
+  }
+
+  .apply-icon {
+    font-size: 30px;
+    margin-bottom: 10px;
+  }
+
+  .apply-title {
+    font-size: var(--epx-font-size-s);
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .apply-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>