BIGTOP-4481: Optimize frontend code structure

bigtop-manager-ui/README.md

@@ -15,43 +15,53 @@
    limitations under the License.
 --->
 
-# Bigtop-Manager-ui
+# Bigtop Manager UI 
 
-Bigtop-Manager-ui is the front-end UI of the Manager platform, which stores code about the interaction between the platform and users, interface display, control styles, etc.
+Bigtop Manager UI is the front-end UI of the Manager platform, which stores code about the interaction between the platform and users, interface display, control styles, etc.
 
 ## Prerequisites
 
-Vite: Version 4.4.5
+- Node.js：`v18.17.0`
 
-Typescript: Version 5.0.2
+- pnpm: `v8.6.9`
 
-Vue: Version 3.3.4
+- Vite：`v5.4.19`
 
-Editor: VsCode
+- Typescript：`v5.8.3`
+
+- Vue：`v3.4.37`
+
+- Editor Recommendation: [Visual Studio Code](https://code.visualstudio.com/)
 
 ## Project Structure
 
-```
-—————————————————— public               static resources
-—————————————————— src                  project source code
-——————————— api                         calls the backend interface
-——————————— assets                      static assets
-——————————— components                  customize components
-——————————— composables                 composable
-——————————— directives                  customize directive
-——————————— layouts                     overall page layout
-——————————— locales                     internationalization
-——————————— pages                       components
-——————————— plugins                     global registration configuration
-——————————— router                      router
-——————————— store                       global persistence
-——————————— styles                      style file
-——————————— types                       data type
-——————————— utils                       utility function
-——————————— App.vue                     project root component
-——————————— main.ts                     Project packaging portal
-—————————————————— index.html           Project page
-—————————————————— package.json         Package management profile for your project
-—————————————————— vite.config.ts       Project configuration file
-—————————————————— postcss.config.ts    postcss configuration file
+```plaintext
+├── public/                    # Static assets
+├── src/                       # Source code root
+│   ├── api/                   # API request functions
+│   ├── assets/                # Static assets 
+│   ├── components/            # Reusable component directory
+│   │   ├── base/              # Basic UI components
+│   │   ├── common/            # Common composite components
+│   ├── composables/           # Vue composables 
+│   ├── directives/            # Custom directives
+│   ├── features/              # Feature-based components
+│   ├── layouts/               # Layout components
+│   ├── locales/               # locale files (i18n)
+│   ├── pages/                 # Page components
+│   ├── plugins/               # Plugins and global registrations
+│   ├── router/                # Routing configuration
+│   ├── store/                 # Global state management
+│   ├── styles/                # Global styles
+│   ├── types/                 # Global TypeScript declarations (.d.ts)
+│   ├── utils/                 # Utility functions
+│   ├── App.vue                # Root component
+│   └── main.ts                # Project entry point
+├── tests/                     # Unit and integration tests
+├── index.html                 # HTML template
+├── package.json               # Project metadata and dependencies
+├── tsconfig.json              # TypeScript config file
+├── vite.config.ts             # Vite config
+├── postcss.config.ts          # PostCSS config
+└── vitest.config.ts           # Vitest config
 ```

bigtop-manager-ui/README.zh.md

@@ -15,43 +15,53 @@
    limitations under the License.
 --->
 
-# Bigtop-Manager-ui
+# Bigtop Manager UI 
 
-Bigtop-Manager-ui是Manager平台的前端UI，存放有关平台与用户交互，界面展示，控件样式等代码。
+Bigtop Manager UI 是 Manager 平台的前端 UI，存放有关平台与用户交互，界面展示，控件样式等代码。
 
 ## 先决条件
 
-Vite：版本4.4.5
+- Node.js：`v18.17.0`
 
-Typescript：版本5.0.2
+- pnpm: `v8.6.9`
 
-Vue：版本3.3.4
+- Vite：`v5.4.19`
 
-编辑器：VsCode
+- Typescript：`v5.8.3`
+
+- Vue：`v3.4.37`
+
+- 推荐编辑器：[Visual Studio Code](https://code.visualstudio.com/)
 
 ## 项目结构
 
-```
-——————————————————public                公共静态资源
-——————————————————src                   项目源代码
-——————————— api                         调用后端接口
-——————————— assets                      静态资源
-——————————— components                  自定义组件
-——————————— composables                 组合式函数
-——————————— directives                  自定义指令
-——————————— layouts                     整体页面布局
-——————————— locales                     国际化
-——————————— pages                       组件
-——————————— plugins                     全局注册配置
-——————————— router                      路由
-——————————— store                       全局持久化
-——————————— styles                      样式文件
-——————————— types                       数据类型
-——————————— utils                       工具函数
-——————————— App.vue                     项目根组件
-——————————— main.ts                     项目打包入口
-—————————————————— index.html           项目页面
-—————————————————— package.json         项目的包管理配置文件
-—————————————————— vite.config.ts       项目配置文件
-—————————————————— postcss.config.ts    postcss 配置文件
+```plaintext
+├── public/                    # 公共静态资源
+├── src/                       # 项目源代码目录
+│   ├── api/                   # 后端接口封装
+│   ├── assets/                # 静态资源
+│   ├── components/            # 可复用组件目录
+│   │   ├── base/              # 基础组件
+│   │   ├── common/            # 常用复合组件
+│   ├── composables/           # Vue 组合式函数
+│   ├── directives/            # 自定义指令
+│   ├── features/              # 业务组件
+│   ├── layouts/               # 页面布局组件
+│   ├── locales/               # 国际化资源（i18n）
+│   ├── pages/                 # 页面级组件
+│   ├── plugins/               # 插件与全局注册逻辑
+│   ├── router/                # 路由配置
+│   ├── store/                 # 全局状态管理
+│   ├── styles/                # 全局样式
+│   ├── types/                 # 全局类型声明（.d.ts）
+│   ├── utils/                 # 工具函数
+│   ├── App.vue                # 根组件
+│   └── main.ts                # 项目入口文件
+├── tests/                     # 单元测试或集成测试用例
+├── index.html                 # HTML 模板文件
+├── package.json               # 包管理与脚本配置文件
+├── tsconfig.json              # TypeScript 配置文件
+├── vite.config.ts             # Vite 配置文件
+├── postcss.config.ts          # PostCSS 配置
+└── vitest.config.ts           # Vitest 测试配置文件
 ```

bigtop-manager-ui/src/App.vue

@@ -18,10 +18,9 @@
 -->
 
 <script setup lang="ts">
-  import { storeToRefs } from 'pinia'
-  import { onMounted } from 'vue'
   import { useLocaleStore } from '@/store/locale'
   import { useThemeStore } from './store/theme'
+
   const themeStore = useThemeStore()
   const localeStore = useLocaleStore()
   const { antd } = storeToRefs(localeStore)

bigtop-manager-ui/src/api/service/types.ts

@@ -56,12 +56,15 @@ export interface ServiceConfig {
   properties?: Property[]
 }
 
+type PropertyAction = 'add' | 'update' | 'delete'
+
 export interface Property {
   attrs?: Attr
   desc?: string
   displayName?: string
   name: string
   value?: string
+  action?: PropertyAction
   [property: string]: any
 }
 

bigtop-manager-ui/src/components/common/header-card/index.vue → bigtop-manager-ui/src/components/base/header-card/index.vue

@@ -19,8 +19,8 @@
 
 <script setup lang="ts">
   import { usePngImage } from '@/utils/tools'
-  import { GroupItem } from '../button-group/types'
-  import { computed } from 'vue'
+
+  import type { GroupItem } from '@/components/common/button-group/types'
 
   interface Props {
     showAvatar?: boolean

bigtop-manager-ui/src/components/common/markdown-view/index.vue → bigtop-manager-ui/src/components/base/markdown-view/index.vue

@@ -18,12 +18,10 @@
 -->
 
 <script setup lang="ts">
-  import { computed, toRefs, nextTick } from 'vue'
   import { Marked } from 'marked'
   import { markedHighlight } from 'marked-highlight'
   import { copyText } from '@/utils/tools'
   import { message } from 'ant-design-vue'
-  import { useI18n } from 'vue-i18n'
   import hljs from 'highlight.js'
 
   type Props = {

bigtop-manager-ui/src/components/common/status-dot/index.vue → bigtop-manager-ui/src/components/base/status-dot/index.vue

@@ -19,7 +19,6 @@
 
 <script setup lang="ts">
   import { StatusType, StatusColors } from '@/enums/state'
-  import { computed } from 'vue'
 
   interface StatusDot {
     size?: number

bigtop-manager-ui/src/components/common/svg-icon/index.vue → bigtop-manager-ui/src/components/base/svg-icon/index.vue

@@ -18,8 +18,6 @@
 -->
 
 <script setup lang="ts">
-  import { computed } from 'vue'
-
   const icons = {
     avatar: IconSvgAvatar,
     'bm-logo': IconSvgBmLogo,

bigtop-manager-ui/src/components/common/button-group/index.vue

@@ -18,9 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { toRefs } from 'vue'
   import type { GroupItem, Props } from './types'
-  import { useI18n } from 'vue-i18n'
 
   const props = withDefaults(defineProps<Props>(), {
     i18n: '',
@@ -65,7 +63,7 @@
               <slot name="icon" :item="item" />
             </template>
             <span v-if="item.text">
-              {{ $props.i18n && item.text ? $t(`${$props.i18n}.${item.text}`) : item.text }}
+              {{ $props.i18n && item.text ? t(`${$props.i18n}.${item.text}`) : item.text }}
             </span>
           </a-button>
           <template #overlay>
@@ -89,7 +87,7 @@
             <slot name="icon" :item="item" />
           </template>
           <span v-if="item.text">
-            {{ $props.i18n && item.text ? $t(`${$props.i18n}.${item.text}`) : item.text }}
+            {{ $props.i18n && item.text ? t(`${$props.i18n}.${item.text}`) : item.text }}
           </span>
         </a-button>
       </template>

bigtop-manager-ui/src/components/common/form-builder/index.vue

@@ -18,10 +18,8 @@
 -->
 
 <script lang="ts" setup>
-  import { h, ref, computed } from 'vue'
   import { getFormItemComponent } from './config'
   import { isString } from 'lodash-es'
-  import { useI18n } from 'vue-i18n'
 
   import type { FormInstance, FormProps } from 'ant-design-vue'
   import type { FormItem } from './types'

bigtop-manager-ui/src/components/common/form-filter/index.vue

@@ -19,14 +19,14 @@
 
 <script setup lang="ts">
   import { MenuProps } from 'ant-design-vue'
-  import { ref, toRefs, computed, shallowRef, toRaw } from 'vue'
   import { isEqual, cloneDeep } from 'lodash-es'
   import type { FilterFormItem } from './types'
 
   interface FilterFormPops {
     filterItems: FilterFormItem[]
   }
 
+  const { t } = useI18n()
   const props = defineProps<FilterFormPops>()
   const emits = defineEmits(['filter'])
   const { filterItems } = toRefs(props)
@@ -98,7 +98,7 @@
                 <a-menu-item
                   v-for="menuItem in item.options"
                   :id="item.key"
-                  :key="menuItem.key"
+                  :key="menuItem.key as any"
                   :title="menuItem.label"
                   @click.stop
                 >
@@ -113,10 +113,10 @@
                     type="link"
                     @click.stop="resetFilter(item)"
                   >
-                    {{ $t('common.reset') }}
+                    {{ t('common.reset') }}
                   </a-button>
                   <a-button size="small" type="primary" @click="confirmFilterParams">
-                    {{ $t('common.ok') }}
+                    {{ t('common.ok') }}
                   </a-button>
                 </a-space>
               </a-menu>
@@ -126,12 +126,12 @@
             <div class="search" @click.stop>
               <a-input
                 v-model:value="filterParams[item.key]"
-                :placeholder="`${$t('common.enter_error')}${item.label.toLowerCase()}`"
+                :placeholder="`${t('common.enter_error')}${item.label.toLowerCase()}`"
                 @click.stop
               />
               <a-space class="search-option">
-                <a-button size="small" @click.stop="resetFilter(item)">{{ $t('common.reset') }}</a-button>
-                <a-button size="small" type="primary" @click="confirmFilterParams">{{ $t('common.search') }}</a-button>
+                <a-button size="small" @click.stop="resetFilter(item)">{{ t('common.reset') }}</a-button>
+                <a-button size="small" type="primary" @click="confirmFilterParams">{{ t('common.search') }}</a-button>
               </a-space>
             </div>
           </template>

bigtop-manager-ui/src/components/common/form-filter/types.ts

@@ -28,4 +28,5 @@ export interface FilterFormItem {
   key: string
   label: string
   options?: FilterFormItemOptionItem[]
+  [propkey: string]: any
 }

bigtop-manager-ui/src/components/common/index.ts → bigtop-manager-ui/src/components/index.ts

@@ -24,9 +24,16 @@ const kebabToCamel = (kebab: string): string => {
 }
 
 const install = (app: App) => {
-  const components = import.meta.glob('../../components/common/**/index.vue', {
+  const commons = import.meta.glob('../../components/common/**/index.vue', {
     eager: true
   }) as any
+
+  const bases = import.meta.glob('../../components/base/**/index.vue', {
+    eager: true
+  }) as any
+
+  const components = { ...commons, ...bases }
+
   for (const path in components) {
     const component = components[path].default
     const componentName = kebabToCamel(path.split('/')[1])