# ZSystem前端

#### main.ts
```
// 整个main.ts只需要这2句代码快速开始
import {zsysapp, addFrameRouters,zsysappMount} from 'zsysview'
import 'zsysview/dist/zsysview.css'
zsysappMount()
```

#### vite.config.ts 请求重写
```
server: {
    host: "0.0.0.0",
    port: 5173,
    proxy: {
      "/api/": {
        target: "http://localhost:1788/api",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
      "/public/": {
        target: "http://localhost:1788/public",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/public/, ""),
      },
    },
  },
```

#### 左侧菜单
```
zsysapp.provide('app_menus',[
    { name: '首页', icon: markRaw(House), url: '/desktop'},
    { name: '数据看板', icon: markRaw(Odometer), url: '/chart' },
    { name: '事件管理', icon: markRaw(Collection), url: '/eventgroup/event'},
    // {
    //     name: '事件管理', icon: markRaw(Collection), url: '/111', show: false,
    //     children: [
    //         { name: '数据看板', icon: markRaw(Odometer), url: '/user', show: false },
    //         { name: '事件', icon: markRaw(Collection), url: '/eventgroup/event', show: false },
    //     ]
    // },
    { name: '行为分析引擎', icon: markRaw(SetUp), url: '/engine' },
    { name: '设备管理', icon: markRaw(VideoCamera), url: '/equipment' },
    { name: '区域管理', icon: markRaw(Location), url: '/area' },
    { name: '报表与统计', icon: markRaw(Document), url: '/building?1' },
    { name: '报警与通知', icon: markRaw(Bell), url: '/building?2'},

])
```

#### 路由添加
```
import {addFrameRouter} from 'zsysview'

addFrameRouter({
  path: "/department",
  meta: { title: '组织架构' },
  component: () => import("../view/department/department.vue"),
})
```

#### 系统组件
名称 | 描述
---------|---------
 breadcrumb | 面包屑、系统地址栏
 zsyslist | 列表控件
 zsys_delbutton | 列表删除操作按钮

zsys_delbutton
```
<el-table-column label="操作" width="130">
  <template #default="{ row }">
    <el-space>
      <zsys_delbutton :id="BigInt(row.area_id)" :api_url="AppApiV1.url_area_del" />
    </el-space>
  </template>
</el-table-column>
```

#### 系统API
 zsys_eventBus

```
const eventBus = zsysEventBus()
eventBus.emit('aud', { module: 'equipment', id: form.value.id })
```

#### 公共方法
分类 | 名称 | 描述
---------|----------|---------
 时间 | formatPreciseOralTime | 口语化时间
 时间 | formatDateTime | 格式化时间

#### 全局变量
```
import {inject} from 'vue'
inject('变量名')
```

名称 | 变量名 | 描述
---------|----------|---------
 系统名称 | appname | 管理员可以修改的系统名称
 备案信息 | icp | 系统的ICP备案描述

## 编译
添加编译时间,新建以下make_build_time.ts
```
import type { Plugin } from 'vite'
import fs from 'fs'
import path from 'path'

export default function make_build_time(): Plugin {
  return {
    name: 'make_build_time',
    
    // 只在构建时应用
    apply: 'build',
    
    // 在构建完成后执行
    closeBundle() {
      const now = new Date()
      const timestamp = [
        now.getFullYear(),
        String(now.getMonth() + 1).padStart(2, '0'),
        String(now.getDate()).padStart(2, '0'),
        '_',
        String(now.getHours()).padStart(2, '0'),
        String(now.getMinutes()).padStart(2, '0'),
        String(now.getSeconds()).padStart(2, '0')
      ].join('')
      
      // 使用 process.cwd() 获取绝对路径
      const outputDir = path.join(process.cwd(), 'dist/assets')
      const outputFile = path.join(outputDir, 'build-time.txt')
      
      // 确保目录存在
      if (!fs.existsSync(outputDir)) {
        fs.mkdirSync(outputDir, { recursive: true })
      }
      
      // 写入文件
      fs.writeFileSync(outputFile, timestamp)
      
      console.log(`🎉 Build timestamp generated: ${timestamp}`)
      console.log(`📁 File saved to: ${outputFile}`)
    }
  }
}
 ```

在vite.config.json中添加
```
import { default as  make_build_time } from './src/tool/make_build_time'

export default defineConfig({
  plugins: [ vue(),
      make_build_time()
   ]})
```