255 lines
6.6 KiB
Vue
255 lines
6.6 KiB
Vue
<script setup lang="ts">
|
|
import AppTabBar from '@/components/AppTabBar.vue'
|
|
import { useGreeting } from '@/hooks/use-greeting'
|
|
import { useQuickEntries } from '@/hooks/use-quick-entries'
|
|
import type { ProjectItem, QuickEntryItem, ServiceItem } from '@/types/home'
|
|
import { navigateQuickEntry } from '@/utils/quick-entry-navigate'
|
|
import headerBg from '@/static/icons/1.png'
|
|
import softwareIllus from '@/static/icons/software.png'
|
|
import hardwareIllus from '@/static/icons/hardware.png'
|
|
import iotIllus from '@/static/icons/iot.png'
|
|
import productionIllus from '@/static/icons/production.png'
|
|
import HomeFloatingActions from './components/HomeFloatingActions.vue'
|
|
import ProjectCard from './components/ProjectCard.vue'
|
|
import QuickEntryEditor from './components/QuickEntryEditor.vue'
|
|
import ServiceCard from './components/ServiceCard.vue'
|
|
|
|
const greeting = useGreeting()
|
|
const {
|
|
pinnedEntries,
|
|
otherEntries,
|
|
editorVisible,
|
|
openEditor,
|
|
closeEditor,
|
|
removeFromPinned,
|
|
addToPinned,
|
|
} = useQuickEntries()
|
|
|
|
const services: ServiceItem[] = [
|
|
{
|
|
id: '1',
|
|
title: '互联网软件',
|
|
desc: 'Web/小程序/APP/二次开发/桌面工具等',
|
|
theme: 'blue',
|
|
illus: softwareIllus,
|
|
detailId: 'software',
|
|
},
|
|
{
|
|
id: '2',
|
|
title: '硬件电路',
|
|
desc: '原理图设计/PCB设计/电气校验等',
|
|
theme: 'green',
|
|
illus: hardwareIllus,
|
|
},
|
|
{
|
|
id: '3',
|
|
title: '物联网全案',
|
|
desc: '软硬件开发+云端一体化/定制化开发等',
|
|
theme: 'pink',
|
|
illus: iotIllus,
|
|
},
|
|
{
|
|
id: '4',
|
|
title: '生产制造',
|
|
desc: 'PCB制版/SMT/整机装配/定制生产等',
|
|
theme: 'orange',
|
|
illus: productionIllus,
|
|
},
|
|
]
|
|
|
|
function handleQuickEntryTap(entry: QuickEntryItem) {
|
|
navigateQuickEntry(entry.id, entry.label)
|
|
}
|
|
|
|
const projects: ProjectItem[] = [
|
|
{
|
|
id: '1',
|
|
title: '社区康养智能服务系统',
|
|
category: '互联网软件',
|
|
projectNo: '20260813RJ251545',
|
|
progress: 65,
|
|
status: '进行中',
|
|
updateTime: '2026-8-13 11:04:12',
|
|
tagTheme: 'orange',
|
|
},
|
|
{
|
|
id: '2',
|
|
title: '社区康养智能服务系统',
|
|
category: '生产制造',
|
|
projectNo: '20260813RJ251545',
|
|
progress: 65,
|
|
status: '进行中',
|
|
updateTime: '2026-8-13 11:04:12',
|
|
tagTheme: 'orange',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<view class="home">
|
|
<view class="home__header">
|
|
<image
|
|
class="home__header-bg"
|
|
:src="headerBg"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="home__header-inner">
|
|
<view class="home__header-top">
|
|
<view class="home__brand">
|
|
<image
|
|
class="home__logo"
|
|
src="/static/icons/logos.png"
|
|
mode="aspectFit"
|
|
/>
|
|
<text class="home__brand-name">
|
|
虫子智造研发一体化平台
|
|
</text>
|
|
</view>
|
|
<view class="home__message-btn">
|
|
<image
|
|
class="home__message-icon"
|
|
src="/static/icons/icon-message.png"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="home__greeting-row">
|
|
<text class="home__greeting">
|
|
{{ greeting }}
|
|
</text>
|
|
<view class="home__hi-badge">
|
|
<image
|
|
class="home__hi-icon"
|
|
src="/static/icons/hi.png"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<text class="home__subtitle">
|
|
今天有2个项目正在进行
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view
|
|
class="home__body"
|
|
scroll-y
|
|
:show-scrollbar="false"
|
|
>
|
|
<view class="home__content">
|
|
<view class="home__section">
|
|
<text class="home__section-title">
|
|
业务服务
|
|
</text>
|
|
<view class="home__service-grid">
|
|
<ServiceCard
|
|
v-for="item in services"
|
|
:key="item.id"
|
|
:item="item"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="home__sections">
|
|
<view class="home__section-header">
|
|
<text class="home__section-title">
|
|
快捷入口
|
|
</text>
|
|
<text
|
|
class="home__section-action"
|
|
@tap="openEditor"
|
|
>
|
|
编辑
|
|
</text>
|
|
</view>
|
|
<view class="home__quick-row">
|
|
<view
|
|
v-for="entry in pinnedEntries"
|
|
:key="entry.id"
|
|
class="home__quick-item"
|
|
@tap="handleQuickEntryTap(entry)"
|
|
>
|
|
<image
|
|
class="home__quick-icon"
|
|
:src="entry.icon"
|
|
mode="aspectFit"
|
|
/>
|
|
<text class="home__quick-label">
|
|
{{ entry.label }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="home__sectionss home__section--last">
|
|
<view class="home__section-header">
|
|
<text class="home__section-title">
|
|
在办项目
|
|
</text>
|
|
<text class="home__section-action">
|
|
查看全部
|
|
</text>
|
|
</view>
|
|
|
|
<view class="home__stats-row">
|
|
<view class="home__stat-card home__stat-card--blue">
|
|
<view class="home__stat-value">
|
|
<text class="home__stat-num">
|
|
3
|
|
</text>
|
|
<text class="home__stat-unit">
|
|
个项目
|
|
</text>
|
|
</view>
|
|
<text class="home__stat-label">
|
|
进行中
|
|
</text>
|
|
</view>
|
|
<view class="home__stat-card home__stat-card--orange">
|
|
<view class="home__stat-value">
|
|
<text class="home__stat-num">
|
|
3
|
|
</text>
|
|
<text class="home__stat-unit">
|
|
项待办
|
|
</text>
|
|
</view>
|
|
<text class="home__stat-label">
|
|
待您处理
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<text class="home__recent-title">
|
|
最近更新
|
|
</text>
|
|
|
|
<ProjectCard
|
|
v-for="item in projects"
|
|
:key="item.id"
|
|
:item="item"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<AppTabBar active="home" />
|
|
|
|
<HomeFloatingActions />
|
|
|
|
<QuickEntryEditor
|
|
:visible="editorVisible"
|
|
:pinned-entries="pinnedEntries"
|
|
:other-entries="otherEntries"
|
|
@close="closeEditor"
|
|
@remove="removeFromPinned"
|
|
@add="addToPinned"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import './index.scss';
|
|
</style>
|