# PrimeAdmin

**Repository Path**: micropu/PrimeAdmin

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-02
- **Last Updated**: 2025-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PrimeAdmin

## 技术栈

- Vue 3
- Vite
- TailwindCSS
- TypeScript
- Pinia
- View Transition

## 项目结构

### 工具

- 使用 Vite 作为构建工具
- 使用 TailwindCSS 作为样式框架
- 使用 TypeScript 作为编程语言
- 使用 Pinia 作为状态管理库
- 使用 View Transition 作为页面过渡效果
- 使用 AppDesigner 组件实现主题配置系统
- 使用 vuerouter 作为路由管理
- 使用 i18n 作为国际化管理
- 支持暗黑模式
- 支持响应式布局
- 支持路由嵌套
- 支持组件懒加载
- 图标选择器

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

## Customize configuration

See [Vite Configuration Reference](https://vite.dev/config/).

## Project Setup

```sh
pnpm install
```

### Compile and Hot-Reload for Development

```sh
pnpm dev
```

### Type-Check, Compile and Minify for Production

```sh
pnpm build
```

# 主题配置实现逻辑

AppDesigner 组件实现了一个完整的主题配置系统，主要包含以下几个部分：

## 1. 整体架构

- 使用 Drawer 组件作为配置面板容器
- 通过 Tabs 组件分类展示不同的配置项：
  - Base: 基础配置
  - Primitive: 原始样式配置
  - Semantic: 语义化样式配置
  - Component: 组件样式配置
  - Custom: 自定义配置

## 2. 数据流转

### 状态管理

- 使用 `useThemeStore` 管理主题状态
- `TempTheme`: 临时存储主题配置
- `PreviewTheme()`: 实时预览主题
- `ApplyTheme()`: 应用主题配置
- `ResetTheme()`: 重置主题配置

### 数据流向

```
用户操作 -> TempTheme更新 -> PreviewTheme预览 -> ApplyTheme应用
```

## 3. 配置项分类

### Base 配置

- Scale: 缩放比例配置

### Primitive 配置

- BaseTheme: 基础主题选择
- BorderRadius: 边框圆角配置
- Colors: 颜色配置

### Semantic 配置

- Common: 通用样式配置
- FormField: 表单字段样式
- List: 列表样式
- Navigation: 导航样式
- Overlay: 遮罩层样式

### 颜色方案配置

- Light: 明亮主题配置
- Dark: 暗黑主题配置

## 4. 关键功能实现

### 实时预览

typescript
watch(
() => themeStore.TempTheme,
() => {
themeStore.PreviewTheme()
},
{ deep: true }
)

````

### 主题应用
```typescript
// 应用主题配置
const onKeyDown = (event: KeyboardEvent) => {
  if (event.code === 'Enter' || event.code === 'NumpadEnter') {
    themeStore.ApplyTheme()
    event.preventDefault()
  }
}
````

### 懒加载优化

```typescript
const deferredTabs = ref(true)

const onShow = () => {
  deferredTabs.value = false // 打开时禁用懒加载
}

const onHide = () => {
  deferredTabs.value = true // 关闭时启用懒加载
}
```

## 5. 设计令牌（Design Tokens）

使用 DesignTokenField 组件统一管理设计令牌：

- 支持颜色、尺寸、间距等多种类型的配置
- 提供自动完成功能
- 实时预览效果
- 支持暗黑模式

## 6. 使用示例

```vue
<Drawer
  v-model:visible="appStore.designerVisible"
  header="Theme Designer"
  position="right"
  class="designer !w-screen md:!w-[50rem]"
  :modal="false"
  :dismissable="false"
>
  <!-- 配置面板内容 -->
</Drawer>
```

## 7. 注意事项

- 主题配置修改��需要点击"应用"按钮才会永久生效
- 支持实时预览功能
- 提供重置功能，可恢复默认主题
- 配置面板支持响应式布局

```

```