# turing-admin

**Repository Path**: tlan_turing/think-adminez

## Basic Information

- **Project Name**: turing-admin
- **Description**: No description available
- **Primary Language**: PHP
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-20
- **Last Updated**: 2025-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AdminMatrix 后台管理系统

# 目录结构  
```bash
├─.cursor   
│  └─rules  
├─.vscode   
├─node_modules  第三方包    
├─public        
└─src   
    ├─assets            资源文件    
    ├─components        组件文件    
    ├─layout                
        ├─default       默认入口    
            ├─components    组件    
            │   ├─ aside    左侧菜单栏  
            │   ├─header    头部区域    
            │   ├─ ...      其他    
            │   └─footer    底部区域    
            └─index.vue     default 入口    
        ├─...           其他方式入口    
        └─index.vue     嵌套路由入口    
    ├─utils             工具类  
    │   ├─ stores       缓存工具    
    │   ├─ request      请求axios工具   
    │   ├─ enums        类型库  
    │   ├─ router       路由组件    
    │   │   ├─index.ts  底层    
    │   │   └─routes.ts  自定义路由 
    └─views             前端运行目录        
       ├─ pages         拖拽生成页面组件    
       │   ├─components    公共组件库   
       │   │  └─ ...       页面组件目录              
       │   ├─ leftComponents   左侧显示组件图标列表 
       │   ├─rightComponents   右侧显示左侧组件的参数配置 attr  
       │   └─DragPageBuilder.vue  组件入口  
       └─ ... 其他页面  
```

# 项目概述

AdminMatrix 是一款基于 Vue 和 ElementPlus 构建的 SAAS 后台管理系统。它采用模块化设计，提供了丰富的功能，如表单组件模块、拖拽生成页面、可视化页面前端在线编辑预览以及 Mysql 可视化编辑等。系统还支持从远端、服务端获取新模块和组件，以满足不同的业务需求。

# 技术栈
- 前端框架：Vue 3.5.13
- UI 组件库：ElementPlus 2.9.6
- 状态管理：Pinia 3.0.1
- 路由管理：Vue Router 4
- HTTP 请求：Axios 1.8.3
- 进度条：Nprogress 0.2.0
- 图标库：@element-plus/icons-vue 2.3.1
- 拖拽组件：Vuedraggable 2.24.3

# 开发依赖
- 类型定义：@types/node 22.13.10，@types/nprogress 0.2.3，@vue/tsconfig 0.7.0
- Vite 插件：@vitejs/plugin-vue 5.2.1
- CSS 处理：Autoprefixer 10.4.7，Postcss 8.4.14，Tailwindcss 3.4.17
- 样式预处理器：Sass 1.86.0
- 代码检查：Typescript 5.7.2，Vue-tsc 2.2.4
- 自动导入插件：Unplugin-auto-import 19.1.1，Unplugin-vue-components 28.4.1
- 构建工具：Vite 6.2.0

# 主要功能

## 模块化系统
  - 系统采用模块化设计，每个模块都具有独立的功能和业务逻辑，便于开发、维护和扩展。

## 表单组件模块
  - 提供丰富的表单组件，支持验证、表单提交、编辑等功能。用户可以根据需求选择合适的表单组件，并进行自定义配置。

## 拖拽生成页面

### 功能概述
> 拖拽生成页面功能允许用户通过可视化界面快速构建页面。用户可以从组件库中拖拽组件到设计区域，并通过右侧属性面板配置组件的属性和样式。

### 目录结构
```bash
src/views/pages/
├── components/              # 组件库目录
│   ├── form/               # 表单类组件
│   │   ├── input/         # 输入框组件
│   │   │   ├── index.vue  # 组件实现
│   │   │   ├── config.ts  # 组件配置
│   │   │   ├── types.ts   # 类型定义
│   │   │   ├── attr.ts    # 属性配置
│   │   │   └── function.ts # 功能函数
│   │   └── ... 其他表单组件
│   └── ... 其他类型组件
├── types/                  # 类型定义
│   └── component.ts       # 组件相关类型
└── DragPageBuilder.vue    # 拖拽页面构建器
```

### 创建新组件
要创建一个新的可拖拽组件，需要遵循以下步骤：

1. **创建组件目录结构**
   ```bash
   components/
   └── 分类/
       └── 组件名/
           ├── index.vue    # 组件实现
           ├── config.ts    # 组件配置
           ├── types.ts     # 类型定义
           ├── attr.ts      # 属性配置
           └── function.ts  # 功能函数
   ```

2. **实现组件文件**
   - `index.vue`: 组件的具体实现
     ```vue
     <template>
       <el-form-item :label="label" :required="required">
         <component-content v-bind="$attrs" v-model="value" />
       </el-form-item>
     </template>
     ```

   - `config.ts`: 组件配置文件
     ```typescript
     export default {
       type: ComponentType.XXX,
       category: ComponentCategory.XXX,
       label: '组件名称',
       icon: markRaw(IconComponent),
       props: {
         base: { /* 基础属性默认值 */ },
         style: { /* 样式属性默认值 */ },
         baseSchema: { /* 基础属性编辑配置 */ },
         styleSchema: { /* 样式属性编辑配置 */ }
       }
     }
     ```

3. **组件接口规范**
   组件必须实现以下接口：
   - `v-model` 双向绑定
   - `validation` 验证状态
   - 属性配置支持
   - 样式配置支持

### 组件配置说明

1. **基础属性 (base)**
   - label: 标签文本
   - placeholder: 占位文本
   - defaultValue: 默认值
   - required: 是否必填
   - disabled: 是否禁用
   - 其他组件特有属性

2. **样式属性 (style)**
   - width: 组件宽度
   - labelWidth: 标签宽度
   - 其他样式相关属性

3. **属性编辑 Schema**
   ```typescript
   {
     type: 'string' | 'number' | 'boolean' | 'select',
     label: '属性显示名称',
     options?: [ // 仅 select 类型需要
       { label: '选项1', value: 'value1' },
       { label: '选项2', value: 'value2' }
     ]
   }
   ```

### 使用示例

1. **创建输入框组件**
   ```typescript
   // config.ts
   export default {
     type: ComponentType.FORM_INPUT,
     category: ComponentCategory.FORM,
     label: '输入框',
     icon: markRaw(Document),
     props: {
       base: {
         label: '输入框',
         placeholder: '请输入',
         defaultValue: ''
       },
       style: {
         width: '100%',
         labelWidth: '100px'
       }
     }
   }
   ```

2. **使用组件**
   ```vue
   <template>
     <div class="design-area">
       <component
         v-for="comp in components"
         :key="comp.id"
         :is="resolveComponent(comp.type)"
         v-bind="comp.props"
       />
     </div>
   </template>
   ```

### 注意事项

1. **组件注册**
   - 组件会被自动注册，无需手动导入
   - 确保组件目录结构正确
   - 确保配置文件格式正确

2. **类型安全**
   - 使用 TypeScript 确保类型安全
   - 实现必要的接口和类型

3. **性能优化**
   - 使用 `markRaw` 处理非响应式数据
   - 合理使用计算属性和缓存

4. **样式规范**
   - 遵循项目的样式规范
   - 使用 scoped 样式隔离

### 开发建议

1. 参考现有组件的实现
2. 确保组件的可复用性
3. 添加适当的注释和文档
4. 实现必要的验证和错误处理
5. 考虑组件的可扩展性

## 可视化页面前端在线编辑预览
   - 提供前端在线编辑和预览功能，用户可以实时看到页面的修改效果，提高开发效率。

## Mysql 可视化编辑
  - 支持对 Mysql 数据库进行可视化编辑，用户可以直接在界面上进行数据库表的创建、修改、删除等操作。

## 组件联动
  - 表单组件之间支持联动功能，用户可以根据业务需求设置组件之间的关联关系，实现数据的自动填充和验证。
  
##  远程模块和组件获取
 - 系统支持从远端、服务端获取新的模块和组件，方便用户扩展系统功能。


# 工具使用

## DynamicLoader 动态加载工具

### 功能介绍
DynamicLoader 是一个用于动态加载组件的工具，支持自动扫描指定目录下的组件文件并进行加载。主要用于：
- 动态加载页面组件
- 动态加载布局组件
- 支持组件元数据
- 自动缓存加载结果

### 使用方法

1. **加载页面组件**
```typescript
import { loadPageComponents } from '@/utils/dynamicLoader/componentLoader'

// 加载所有页面组件
const components = await loadPageComponents()
```

2. **加载布局组件**
```typescript
import { loadLayouts } from '@/utils/dynamicLoader/componentLoader'

// 加载所有布局组件
const layouts = await loadLayouts()
```

3. **组件元数据要求**
组件必须包含 metadata 属性，格式如下：
```typescript
{
  name: 'ComponentName',
  metadata: {
    type: 'component-type',
    category: 'component-category',
    label: '组件显示名称',
    icon: IconComponent,
    props: {
      base: {
        // 基础属性默认值
      },
      style: {
        // 样式属性默认值
      },
      baseSchema: {
        // 基础属性配置架构
      },
      styleSchema: {
        // 样式属性配置架构
      }
    }
  }
}
```

4. **缓存控制**
```typescript
import { dynamicLoader } from '@/utils/dynamicLoader'

// 清除特定路径的缓存
dynamicLoader.clearCache('pages/components')

// 清除所有缓存
dynamicLoader.clearCache()
```

### 注意事项

1. **组件结构要求**
   - 组件必须放置在正确的目录结构中
   - 组件文件名必须为 index.vue
   - 组件必须包含正确格式的 metadata

2. **元数据规范**
   - type: 组件类型标识
   - category: 组件分类
   - label: 组件显示名称
   - icon: 组件图标
   - props: 组件属性配置

3. **性能优化**
   - 组件加载结果会被缓存
   - 建议在组件较多时使用懒加载
   - 可以通过 clearCache 控制缓存

4. **错误处理**
   - 加载失败的组件会被静默忽略
   - 返回空数组表示加载失败
   - 建议添加适当的错误处理逻辑

### 示例

1. **创建可加载组件**
```vue
<script lang="ts">
import { defineComponent } from 'vue'
import { Edit } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'CustomComponent',
  metadata: {
    type: 'custom',
    category: 'form',
    label: '自定义组件',
    icon: Edit,
    props: {
      base: {
        // 基础属性
      },
      style: {
        // 样式属性
      }
    }
  }
})
</script>
```

2. **使用动态加载组件**
```vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { loadPageComponents } from '@/utils/dynamicLoader/componentLoader'

const components = ref([])

onMounted(async () => {
  components.value = await loadPageComponents()
})
</script>
```

# 安装与运行
## 安装依赖
```bash
npm install
```
## 开发环境运行
```bash
npm run dev
```
## 生产环境构建
```bash
npm run build
```
# 贡献指南

## 组件开发指南

### 组件类型
系统支持两种类型的组件:
1. 本地组件 - 直接在项目中开发的组件
2. 远程组件 - 通过插件系统动态加载的组件

### 组件分组
组件按功能分为三大类:
```typescript
export const enum ComponentGroupEnum {
    FORM = 'form',         // 表单组件
    LAYOUT = 'layout',     // 布局组件
    AUXILIARY = 'auxiliary' // 辅助组件
}
```

### 创建本地组件

1. **组件目录结构**
```bash
src/views/pages/components/
└── form/                     # 组件分类目录
    └── input/               # 组件目录
        ├── index.vue       # 组件实现
        └── types.ts        # 组件类型定义
```

2. **组件实现示例**
```vue
<template>
  <el-form-item :label="label">
    <el-input
      :model-value="modelValue"
      :placeholder="placeholder"
      @update:model-value="$emit('update:modelValue', $event)"
    />
  </el-form-item>
</template>

<script setup lang="ts">
defineProps({
  modelValue: [String, Number],
  label: String,
  placeholder: String
})

defineEmits(['update:modelValue'])
</script>
```

3. **注册本地组件**
```typescript
const componentList = [
  {
    type: ComponentType.INPUT,      // 组件类型
    name: '输入框',                 // 组件名称
    group: ComponentGroupEnum.FORM, // 组件分组
    icon: markRaw(Edit),           // 组件图标
    component: markRaw(FormInput),  // 组件实现
    props: {
      base: {                      // 基础属性
        modelValue: '',            // 默认值
        label: '输入框',           // 标签
        placeholder: '请输入'      // 占位符
      },
      style: {}                    // 样式属性
    }
  }
]
```

### 创建远程组件

1. **远程组件定义**
```typescript
const remoteComponent = {
  type: 'remote-input',           // 组件类型(唯一标识)
  name: '远程输入框',             // 组件显示名称
  group: 'form',                 // 组件分组
  icon: markRaw(Edit),           // 组件图标
  template: `                    // 组件模板
    <el-form-item :label="label">
      <el-input
        v-model="modelValue"
        :placeholder="placeholder"
        @update:modelValue="$emit('update:modelValue', $event)"
      />
    </el-form-item>
  `,
  props: {
    base: {                      // 基础属性
      modelValue: '',            // 默认值
      label: '远程输入框',       // 标签
      placeholder: '请输入'      // 占位符
    },
    style: {}                    // 样式属性
  }
}
```

2. **注册远程组件**
```typescript
// 通过插件管理器注册
pluginManager.registerComponent(remoteComponent)
```

### 组件属性说明

1. **基础属性 (base)**
```typescript
interface BaseProps {
  modelValue?: any;           // 组件值
  label?: string;            // 标签文本
  placeholder?: string;      // 占位提示
  required?: boolean;        // 是否必填
  validation?: boolean;      // 验证状态
  options?: Array<{         // 选项(用于选择器等)
    label: string;
    value: any;
  }>;
  min?: number;             // 最小值(用于计数器等)
  max?: number;             // 最大值
  content?: string;         // 内容(用于文本等)
}
```

2. **样式属性 (style)**
```typescript
interface StyleProps {
  width?: string;           // 宽度
  height?: string;          // 高度
  margin?: string;          // 外边距
  padding?: string;         // 内边距
  color?: string;           // 文字颜色
  backgroundColor?: string; // 背景颜色
  textAlign?: string;       // 文本对齐
}
```

### 组件使用示例

1. **拖拽使用**
- 从左侧组件列表拖拽组件到画布
- 组件会自动创建实例并显示
- 点击组件可在右侧面板配置属性

2. **代码调用**
```typescript
// 获取组件
const component = getComponentByType('input')

// 创建组件实例
const instance = {
  id: `input_${Date.now()}`,
  type: 'input',
  props: {
    base: { ...component.props.base },
    style: { ...component.props.style }
  }
}

// 添加到页面
config.components.push(instance)
```

### 注意事项

1. **组件命名规范**
- 组件类型必须唯一
- 组件名称应简明易懂
- 使用有意义的图标

2. **属性配置规范**
- 基础属性和样式属性分开配置
- 提供合适的默认值
- 考虑属性的类型安全

3. **组件实现规范**
- 遵循 Vue 3 组件规范
- 实现必要的生命周期钩子
- 处理好组件的状态管理

4. **远程组件注意事项**
- 模板中只能使用基础组件
- 需要处理好组件的生命周期
- 注意数据的双向绑定