feat(ui): 添加应用图标和系统布局优化

- 新增 app-application 图标组件 - 更新应用页面下拉菜单使用新图标 - 重构思维导图页面布局结构 - 在系统头部添加过期提醒警告 - 添加中国移动图标组件到头部 - 优化布局模板的主题样式处理
2026-03-09 09:56:38 +08:00 · 2026-03-09 09:56:38 +08:00 · d5d1e71bbb
parent 59b1279575
commit d5d1e71bbb
7 changed files with 83 additions and 18 deletions
--- a/ui/src/components/app-icon/icons/application.ts
+++ b/ui/src/components/app-icon/icons/application.ts
@ -761,4 +761,28 @@ export default {
      ])
    },
  },
+  'app-application': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M8 1.33333C5.57037 1.33333 3.66667 3.23704 3.66667 5.66667V7.66667C3.66667 10.0963 5.57037 12 8 12C10.4296 12 12.3333 10.0963 12.3333 7.66667V5.66667C12.3333 3.23704 10.4296 1.33333 8 1.33333ZM8 10.6667C6.01172 10.6667 4.33333 8.98828 4.33333 7V5.66667C4.33333 3.67839 6.01172 2 8 2C9.98828 2 11.6667 3.67839 11.6667 5.66667V7C11.6667 8.98828 9.98828 10.6667 8 10.6667Z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M8 4.33333C7.55817 4.33333 7.16667 4.72483 7.16667 5.16667V6.33333C7.16667 6.77517 7.55817 7.16667 8 7.16667C8.44183 7.16667 8.83333 6.77517 8.83333 6.33333V5.16667C8.83333 4.72483 8.44183 4.33333 8 4.33333Z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
 }
--- a/ui/src/layout/layout-header/SystemHeader.vue
+++ b/ui/src/layout/layout-header/SystemHeader.vue
@ -2,6 +2,7 @@
  <div class="app-top-bar-container border-b flex-center">
    <div class="flex-between w-full align-center" style="padding: 0 16px;">
      <div style="display: flex; align-items: center;">
+        <ChinaMobileIcon />
        <h1 style="font-size: 18px; font-weight: 600; margin: 0;">{{ isSystemManagement ? 'AI-RAG | 系统管理' : 'AI-RAG' }}</h1>
      </div>
      <div style="display: flex; align-items: center;">
@ -16,6 +17,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import ChinaMobileIcon from '@/components/china-mobile-icon/index.vue'

 const route = useRoute()

--- a/ui/src/layout/layout-header/UserHeader.vue
+++ b/ui/src/layout/layout-header/UserHeader.vue
@ -6,6 +6,7 @@

    <div class="flex-between w-full">
      <div class="ml-24 flex align-center w-120">
+        <ChinaMobileIcon />
        <!-- 企业版: 工作空间下拉框-->
        <el-divider
          class="mr-8"
@ -31,6 +32,7 @@ import { useRoute, useRouter } from 'vue-router'
 import TopMenu from './top-menu/index.vue'
 import Avatar from './avatar/index.vue'
 import TopAbout from './top-about/index.vue'
+import ChinaMobileIcon from '@/components/china-mobile-icon/index.vue'
 import { EditionConst } from '@/utils/permission/data'
 import { hasPermission } from '@/utils/permission/index'
 import type { WorkspaceItem } from '@/api/type/workspace'
--- a/ui/src/layout/layout-template/MainLayout.vue
+++ b/ui/src/layout/layout-template/MainLayout.vue
@ -1,7 +1,16 @@
 <template>
  <div class="app-layout" style="display: flex; flex-direction: column; height: 100vh;">
-    <!-- 顶部 header -->
-    <SystemHeader />
+    <div class="app-header" :class="!isDefaultTheme ? 'custom-header' : ''" style="position: static;">
+      <el-alert
+        v-if="user.isExpire()"
+        :title="$t('layout.isExpire')"
+        type="warning"
+        class="border-b"
+        show-icon
+        :closable="false"
+      />
+      <SystemHeader />
+    </div>
    <!-- 主内容区 -->
    <div class="app-main" :class="user.isExpire() ? 'isExpire' : ''" style="display: flex; flex: 1; overflow: hidden;">
      <!-- 最左侧侧边栏 -->
@ -35,7 +44,10 @@ const isShared = computed(() => {
    route.path.includes('resource-management')
  )
 })
-const { user } = useStore()
+const { user, theme } = useStore()
+const isDefaultTheme = computed(() => {
+  return theme.isDefaultTheme()
+})
 </script>
 <style lang="scss" scoped>
@use './index.scss';
--- a/ui/src/layout/layout-template/SimpleLayout.vue
+++ b/ui/src/layout/layout-template/SimpleLayout.vue
@ -1,7 +1,16 @@
 <template>
  <div class="app-layout" style="display: flex; flex-direction: column; height: 100vh;">
-    <!-- 顶部 header -->
-    <SystemHeader />
+    <div class="app-header" :class="!isDefaultTheme ? 'custom-header' : ''" style="position: static;">
+      <el-alert
+        v-if="user.isExpire()"
+        :title="$t('layout.isExpire')"
+        type="warning"
+        class="border-b"
+        show-icon
+        :closable="false"
+      />
+      <SystemHeader />
+    </div>
    <!-- 主内容区 -->
    <div class="app-main" :class="user.isExpire() ? 'isExpire' : ''" style="display: flex; flex: 1; overflow: hidden;">
      <!-- 最左侧侧边栏 -->
@ -23,7 +32,7 @@ import SystemHeader from '@/layout/layout-header/SystemHeader.vue'
 import useStore from '@/stores'
 import { useRoute } from 'vue-router'
 const route = useRoute()
-const { user } = useStore()
+const { user, theme } = useStore()
 const {
  params: { folderId }, // id为knowledgeID
  query: { from },
@ -36,6 +45,9 @@ const isShared = computed(() => {
    route.path.includes('resource-management')
  )
 })
+const isDefaultTheme = computed(() => {
+  return theme.isDefaultTheme()
+})
 </script>
 <style lang="scss">
@use './index.scss';
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@ -238,9 +238,13 @@
                        </el-button>
                        <template #dropdown>
                          <el-dropdown-menu>
-                            <el-dropdown-item @click.stop="toChat(item)">
+                            <!-- <el-dropdown-item @click.stop="goApp(item)">
                              <AppIcon iconName="app-create-chat" class="color-secondary"></AppIcon>
-                              {{ $t('views.application.operation.toChat') }}
+                              {{ $t('views.application.operation.goApp') }}
+                            </el-dropdown-item> -->
+                            <el-dropdown-item @click.stop="goApp(item)">
+                              <AppIcon iconName="app-application" class="color-secondary"></AppIcon>
+                              应用
                            </el-dropdown-item>
                            <el-dropdown-item
                              @click.stop="settingApplication(item)"
--- a/ui/src/views/mindmap/index.vue
+++ b/ui/src/views/mindmap/index.vue
@ -1,21 +1,30 @@
 <template>
-  <div class="mindmap-container">
-    <iframe 
-      src="http://10.100.52.76:3000/" 
-      style="width: 100%; height: 100vh; border: none;"
-      title="思维导图"
-    ></iframe>
-  </div>
+  <LayoutContainer class="mindmap-container">
+    <template #left>
+      <h4 class="p-12-16 pb-0 mt-12">思维导图</h4>
+    </template>
+    <div class="mindmap-content">
+      <iframe 
+        src="http://10.100.52.76:3000/" 
+        style="width: 100%; height: 100%; border: none;"
+        title="思维导图"
+      ></iframe>
+    </div>
+  </LayoutContainer>
 </template>

 <script setup lang="ts">
-// 思维导图页面组件
+import LayoutContainer from '@/components/layout-container/index.vue'
 </script>

 <style scoped>
 .mindmap-container {
-  width: 100%;
-  height: 100vh;
+  height: 100%;
+  overflow: hidden;
+}
+
+.mindmap-content {
+  height: 100%;
  overflow: hidden;
 }
 </style>