feat(ui): 新增“天天系统”ERP管理平台主页布局与控制台页面优化
- 为控制台首页添加页面标题动态设置 - 为应用中心页面添加页面标题动态设置 - 修改控制台布局，实现动态浏览器标签页标题更新 - 新增“天天系统”ERP管理平台主页，包含侧边栏导航、顶部栏及数据概览模块 - 实现主页搜索框、通知、语言和用户信息区域交互 - 添加欢迎区、快捷入口、最近使用应用列表及应用详情抽屉功能 - 支持小程序扫码弹窗展示和应用类型图标及颜色区分 - 优化页面样式，支持响应式布局及交互效果 - 更新Nuxt国际化重定向路径片段标识符以兼容新版本
This commit is contained in:
Binary file not shown.
@@ -2675,7 +2675,7 @@ const _xcUbjOGHb1DY_0q4vboOUFGJ6nlkQiqabJRmCaoRlCA = defineNitroPlugin(async (ni
|
|||||||
const localeSegment = detector.route(event.path);
|
const localeSegment = detector.route(event.path);
|
||||||
const pathLocale = isSupportedLocale(localeSegment) && localeSegment || void 0;
|
const pathLocale = isSupportedLocale(localeSegment) && localeSegment || void 0;
|
||||||
const path = (pathLocale && url.pathname.slice(pathLocale.length + 1)) ?? url.pathname;
|
const path = (pathLocale && url.pathname.slice(pathLocale.length + 1)) ?? url.pathname;
|
||||||
if (!url.pathname.includes("/_i18n/0FfD6CEv") && !isExistingNuxtRoute(path)) {
|
if (!url.pathname.includes("/_i18n/2i3X6Hlx") && !isExistingNuxtRoute(path)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const resolved = resolveRedirectPath(event, path, pathLocale, ctx.vueI18nOptions.defaultLocale, detector);
|
const resolved = resolveRedirectPath(event, path, pathLocale, ctx.vueI18nOptions.defaultLocale, detector);
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"date": "2026-04-08T09:07:42.267Z",
|
"date": "2026-04-08T09:45:03.280Z",
|
||||||
"preset": "nitro-dev",
|
"preset": "nitro-dev",
|
||||||
"framework": {
|
"framework": {
|
||||||
"name": "nuxt",
|
"name": "nuxt",
|
||||||
@@ -9,9 +9,9 @@
|
|||||||
"nitro": "2.12.8"
|
"nitro": "2.12.8"
|
||||||
},
|
},
|
||||||
"dev": {
|
"dev": {
|
||||||
"pid": 39171,
|
"pid": 41825,
|
||||||
"workerAddress": {
|
"workerAddress": {
|
||||||
"socketPath": "/var/folders/qz/k8gbknb502j_f8wbdcc8bs6h0000gn/T/nitro-worker-39171-1-1-6661.sock"
|
"socketPath": "/var/folders/qz/k8gbknb502j_f8wbdcc8bs6h0000gn/T/nitro-worker-41825-1-1-1011.sock"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
4
.nuxt/nuxt.d.ts
vendored
4
.nuxt/nuxt.d.ts
vendored
@@ -1,9 +1,9 @@
|
|||||||
/// <reference types="./modules/fix-tailwind-postcss" />
|
/// <reference types="./modules/fix-tailwind-postcss" />
|
||||||
/// <reference types="@nuxtjs/tailwindcss" />
|
|
||||||
/// <reference types="@nuxt/content" />
|
/// <reference types="@nuxt/content" />
|
||||||
|
/// <reference types="@nuxt/telemetry" />
|
||||||
|
/// <reference types="@nuxtjs/tailwindcss" />
|
||||||
/// <reference types="@nuxtjs/i18n" />
|
/// <reference types="@nuxtjs/i18n" />
|
||||||
/// <reference types="@nuxt/devtools" />
|
/// <reference types="@nuxt/devtools" />
|
||||||
/// <reference types="@nuxt/telemetry" />
|
|
||||||
/// <reference path="types/builder-env.d.ts" />
|
/// <reference path="types/builder-env.d.ts" />
|
||||||
/// <reference path="types/plugins.d.ts" />
|
/// <reference path="types/plugins.d.ts" />
|
||||||
/// <reference path="types/build.d.ts" />
|
/// <reference path="types/build.d.ts" />
|
||||||
|
|||||||
4
.nuxt/nuxt.node.d.ts
vendored
4
.nuxt/nuxt.node.d.ts
vendored
@@ -1,9 +1,9 @@
|
|||||||
/// <reference types="./modules/fix-tailwind-postcss" />
|
/// <reference types="./modules/fix-tailwind-postcss" />
|
||||||
/// <reference types="@nuxtjs/tailwindcss" />
|
|
||||||
/// <reference types="@nuxt/content" />
|
/// <reference types="@nuxt/content" />
|
||||||
|
/// <reference types="@nuxt/telemetry" />
|
||||||
|
/// <reference types="@nuxtjs/tailwindcss" />
|
||||||
/// <reference types="@nuxtjs/i18n" />
|
/// <reference types="@nuxtjs/i18n" />
|
||||||
/// <reference types="@nuxt/devtools" />
|
/// <reference types="@nuxt/devtools" />
|
||||||
/// <reference types="@nuxt/telemetry" />
|
|
||||||
/// <reference path="types/modules.d.ts" />
|
/// <reference path="types/modules.d.ts" />
|
||||||
/// <reference path="types/runtime-config.d.ts" />
|
/// <reference path="types/runtime-config.d.ts" />
|
||||||
/// <reference path="types/app.config.d.ts" />
|
/// <reference path="types/app.config.d.ts" />
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 4/8/2026, 5:07:40 PM
|
// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 4/9/2026, 12:56:45 AM
|
||||||
import "@nuxtjs/tailwindcss/config-ctx"
|
import "@nuxtjs/tailwindcss/config-ctx"
|
||||||
import configMerger from "@nuxtjs/tailwindcss/merger";
|
import configMerger from "@nuxtjs/tailwindcss/merger";
|
||||||
|
|
||||||
|
|||||||
17
.workbuddy/expert-history.json
Normal file
17
.workbuddy/expert-history.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"version": 2,
|
||||||
|
"sessions": {
|
||||||
|
"996cbdf06e514047a153fd275dde6497": [
|
||||||
|
{
|
||||||
|
"expertId": "SeniorDeveloper",
|
||||||
|
"name": "Will",
|
||||||
|
"profession": "高级开发工程师",
|
||||||
|
"avatarUrl": "https://acc-1258344699.cos.accelerate.myqcloud.com/workbuddy/experts/avatars/02-Engineering/SeniorDeveloper/SeniorDeveloper.png",
|
||||||
|
"promptUrl": "https://acc-1258344699.cos.accelerate.myqcloud.com/workbuddy/experts/experts/02-Engineering/SeniorDeveloper/SeniorDeveloper_zh.md",
|
||||||
|
"usedAt": 1775638741301,
|
||||||
|
"industryId": "all"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lastUpdated": 1775667188805
|
||||||
|
}
|
||||||
0
.workbuddy/memory/MEMORY.md
Normal file
0
.workbuddy/memory/MEMORY.md
Normal file
@@ -199,6 +199,11 @@ const currentPageTitle = computed(() => {
|
|||||||
return '控制台'
|
return '控制台'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 动态设置浏览器标签页标题
|
||||||
|
useHead(() => ({
|
||||||
|
title: currentPageTitle.value
|
||||||
|
}))
|
||||||
|
|
||||||
// 选中 key
|
// 选中 key
|
||||||
const selectedKeys = computed(() => {
|
const selectedKeys = computed(() => {
|
||||||
const path = route.path
|
const path = route.path
|
||||||
|
|||||||
@@ -221,6 +221,11 @@ import type { ShopOrder } from '@/api/shop/shopOrder/model'
|
|||||||
|
|
||||||
definePageMeta({ layout: 'console' })
|
definePageMeta({ layout: 'console' })
|
||||||
|
|
||||||
|
// 设置页面标题
|
||||||
|
useHead({
|
||||||
|
title: '应用中心'
|
||||||
|
})
|
||||||
|
|
||||||
// ─── 用户信息 ────────────────────────────────────────────────
|
// ─── 用户信息 ────────────────────────────────────────────────
|
||||||
const userId = ref<string | null>(import.meta.client ? localStorage.getItem('UserId') : null)
|
const userId = ref<string | null>(import.meta.client ? localStorage.getItem('UserId') : null)
|
||||||
const userIdNum = computed(() => (userId.value ? Number(userId.value) : 0))
|
const userIdNum = computed(() => (userId.value ? Number(userId.value) : 0))
|
||||||
|
|||||||
@@ -154,6 +154,11 @@ const router = useRouter()
|
|||||||
|
|
||||||
definePageMeta({ layout: 'console' })
|
definePageMeta({ layout: 'console' })
|
||||||
|
|
||||||
|
// 设置页面标题
|
||||||
|
useHead({
|
||||||
|
title: '控制台'
|
||||||
|
})
|
||||||
|
|
||||||
const userId = import.meta.client ? localStorage.getItem('UserId') : null
|
const userId = import.meta.client ? localStorage.getItem('UserId') : null
|
||||||
|
|
||||||
// 快捷入口配置
|
// 快捷入口配置
|
||||||
|
|||||||
@@ -1,326 +1,496 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="flex min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||||||
<section class="relative overflow-hidden bg-gradient-to-b from-gray-950 to-gray-900 text-white">
|
<!-- 左侧导航 -->
|
||||||
<div class="pointer-events-none absolute left-1/2 top-[-140px] h-[420px] w-[900px] -translate-x-1/2 rounded-full bg-green-500/20 blur-3xl" />
|
<aside class="sidebar w-64 fixed h-full text-white flex flex-col">
|
||||||
<div class="mx-auto max-w-screen-xl px-4 py-16 sm:py-24 relative">
|
<!-- Logo -->
|
||||||
<a-tag color="orange" class="mb-6">
|
<div class="p-6 border-b border-white/10">
|
||||||
<span class="flex items-center gap-1">
|
<div class="flex items-center gap-3">
|
||||||
<span class="text-lg">🦞</span>
|
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
|
||||||
{{ $t('home.heroTag') }}
|
<BlockOutlined class="text-xl" />
|
||||||
</span>
|
</div>
|
||||||
</a-tag>
|
<div>
|
||||||
|
<h1 class="font-bold text-lg">天天系统</h1>
|
||||||
<a-typography-title :level="1" class="!text-white !mb-4">
|
<p class="text-xs text-white/70">ERP 管理平台</p>
|
||||||
{{ $t('home.heroTitle') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-typography-paragraph class="!text-gray-300 !text-lg !mb-8">
|
|
||||||
{{ $t('home.heroDesc') }}
|
|
||||||
</a-typography-paragraph>
|
|
||||||
|
|
||||||
<a-space size="middle" wrap>
|
|
||||||
<a-button type="primary" size="large" @click="navigateTo('/contact')">{{ $t('home.bookDemo') }}</a-button>
|
|
||||||
<a-button size="large" @click="navigateTo('/flow')">{{ $t('home.viewFlow') }}</a-button>
|
|
||||||
<a-button size="large" @click="navigateTo('/deploy')">{{ $t('home.deploy') }}</a-button>
|
|
||||||
</a-space>
|
|
||||||
|
|
||||||
<a-row class="mt-10" :gutter="[16, 16]">
|
|
||||||
<a-col :xs="12" :md="6">
|
|
||||||
<!-- <a-statistic title="平台定位" value="SaaS" />-->
|
|
||||||
</a-col>
|
|
||||||
<a-col :xs="12" :md="6">
|
|
||||||
<!-- <a-statistic title="交付模式" value="私有化" />-->
|
|
||||||
</a-col>
|
|
||||||
<a-col :xs="12" :md="6">
|
|
||||||
<!-- <a-statistic title="能力" value="模板/插件" />-->
|
|
||||||
</a-col>
|
|
||||||
<a-col :xs="12" :md="6">
|
|
||||||
<!-- <a-statistic title="开通" value="自动化" />-->
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
|
|
||||||
<!-- 平台介绍视频 -->
|
|
||||||
<div class="mt-12 rounded-2xl overflow-hidden shadow-2xl border border-gray-700/50 bg-gray-900/50">
|
|
||||||
<ClientOnly>
|
|
||||||
<video
|
|
||||||
class="w-full aspect-video"
|
|
||||||
:src="videoSrc"
|
|
||||||
poster="/images/video-poster.jpg"
|
|
||||||
controls
|
|
||||||
preload="metadata"
|
|
||||||
playsinline
|
|
||||||
@error="handleVideoError"
|
|
||||||
>
|
|
||||||
<p class="text-white text-center py-8">{{ $t('home.videoNotSupported') }}</p>
|
|
||||||
</video>
|
|
||||||
<template #fallback>
|
|
||||||
<div class="w-full aspect-video bg-gray-800 flex items-center justify-center">
|
|
||||||
<span class="text-gray-400">{{ $t('common.loading') }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</ClientOnly>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- OpenClaw AI 智能体生态 -->
|
|
||||||
<section class="relative overflow-hidden bg-gradient-to-r from-orange-50 via-orange-100/50 to-orange-50">
|
|
||||||
<div class="pointer-events-none absolute left-1/4 top-0 h-[300px] w-[300px] rounded-full bg-orange-200/50 blur-3xl" />
|
|
||||||
<div class="pointer-events-none absolute right-1/4 bottom-0 h-[200px] w-[250px] rounded-full bg-red-200/50 blur-3xl" />
|
|
||||||
<div class="mx-auto max-w-screen-xl px-4 py-16 relative">
|
|
||||||
<div class="text-center mb-10">
|
|
||||||
<div class="inline-flex items-center gap-2 px-4 py-2 bg-orange-500 rounded-full text-white text-sm font-medium mb-4">
|
|
||||||
<span class="text-xl">🦞</span>
|
|
||||||
{{ $t('home.openclawTitle') }}
|
|
||||||
</div>
|
</div>
|
||||||
<a-typography-title :level="2" class="!text-gray-900 !mb-2">
|
|
||||||
{{ $t('home.openclawSubtitle') }}
|
|
||||||
</a-typography-title>
|
|
||||||
<a-typography-paragraph class="!text-gray-600 !mb-0 !text-base">
|
|
||||||
{{ $t('home.openclawDesc') }}
|
|
||||||
</a-typography-paragraph>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a-row :gutter="[24, 24]" class="px-4">
|
|
||||||
<a-col :xs="24" :md="8">
|
|
||||||
<div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
|
|
||||||
<div class="text-4xl mb-4">🔗</div>
|
|
||||||
<div class="text-gray-900 font-semibold mb-2">{{ $t('home.multiPlatform') }}</div>
|
|
||||||
<div class="text-gray-600 text-sm">{{ $t('home.multiPlatformDesc') }}</div>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :xs="24" :md="8">
|
|
||||||
<div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
|
|
||||||
<div class="text-4xl mb-4">🧠</div>
|
|
||||||
<div class="text-gray-900 font-semibold mb-2">{{ $t('home.multiModel') }}</div>
|
|
||||||
<div class="text-gray-600 text-sm">{{ $t('home.multiModelDesc') }}</div>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :xs="24" :md="8">
|
|
||||||
<div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
|
|
||||||
<div class="text-4xl mb-4">⚡</div>
|
|
||||||
<div class="text-gray-900 font-semibold mb-2">{{ $t('home.autoWorkflow') }}</div>
|
|
||||||
<div class="text-gray-600 text-sm">{{ $t('home.autoWorkflowDesc') }}</div>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
|
|
||||||
<div class="text-center mt-10">
|
|
||||||
<a-space size="middle">
|
|
||||||
<a-button type="primary" @click="navigateTo('/ai-agent')">
|
|
||||||
<span class="flex items-center gap-2">
|
|
||||||
<span>🦞</span> {{ $t('home.experienceAI') }}
|
|
||||||
</span>
|
|
||||||
</a-button>
|
|
||||||
<a-button @click="navigateTo('/openclaw')">{{ $t('common.learnMore') }}</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
<!-- 导航菜单 -->
|
||||||
<section class="mx-auto max-w-screen-xl px-4 py-14">
|
<nav class="flex-1 py-6 px-3">
|
||||||
<a-typography-title :level="2" class="!mb-2">{{ $t('home.productMatrix') }}</a-typography-title>
|
<div class="space-y-1">
|
||||||
<a-typography-paragraph class="!text-gray-500 !mb-8">
|
<a href="#" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'home'">
|
||||||
{{ $t('home.productMatrixDesc') }}
|
<HomeOutlined class="text-base" />
|
||||||
</a-typography-paragraph>
|
<span>工作台</span>
|
||||||
|
</a>
|
||||||
<a-row :gutter="[16, 16]">
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'device'">
|
||||||
<a-col v-for="p in products" :key="p.title" :xs="24" :md="12" :lg="8">
|
<SettingOutlined class="text-base" />
|
||||||
<a-card :title="p.title">
|
<span>设备管理</span>
|
||||||
<template #extra>
|
</a>
|
||||||
<a-tag v-if="p.recommend" color="green">{{ $t('home.recommend') }}</a-tag>
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'purchase'">
|
||||||
</template>
|
<ShoppingCartOutlined class="text-base" />
|
||||||
<a-typography-paragraph class="!text-gray-600">
|
<span>采购管理</span>
|
||||||
{{ p.desc }}
|
</a>
|
||||||
</a-typography-paragraph>
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'warehouse'">
|
||||||
<div class="flex flex-wrap gap-2">
|
<InboxOutlined class="text-base" />
|
||||||
<a-tag v-for="t in p.tags" :key="t">{{ t }}</a-tag>
|
<span>仓储物流</span>
|
||||||
</div>
|
</a>
|
||||||
<div class="mt-5 flex justify-between items-center">
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'finance'">
|
||||||
<a-tag color="green">{{ p.domain }}</a-tag>
|
<WalletOutlined class="text-base" />
|
||||||
<a-button type="primary" @click="go(p.adminUrl)">{{ $t('common.goNow') }}</a-button>
|
<span>财务管理</span>
|
||||||
</div>
|
</a>
|
||||||
</a-card>
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'hr'">
|
||||||
</a-col>
|
<TeamOutlined class="text-base" />
|
||||||
</a-row>
|
<span>人力资源</span>
|
||||||
|
</a>
|
||||||
<div class="mt-6">
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer" @click.prevent="activeMenu = 'office'">
|
||||||
<a-button @click="navigateTo('/products')">{{ $t('home.viewAll') || $t('common.viewAll') }}</a-button>
|
<ProjectOutlined class="text-base" />
|
||||||
|
<span>协同办公</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8 pt-6 border-t border-white/10">
|
||||||
|
<p class="px-4 text-xs text-white/50 mb-3">个人</p>
|
||||||
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||||
|
<UserOutlined class="text-base" />
|
||||||
|
<span>个人信息</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer">
|
||||||
|
<SettingOutlined class="text-base" />
|
||||||
|
<span>系统设置</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 用户信息 -->
|
||||||
|
<div class="p-4 border-t border-white/10">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
|
||||||
|
<UserOutlined />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-medium">管理员</p>
|
||||||
|
<p class="text-xs text-white/70">超级管理员</p>
|
||||||
|
</div>
|
||||||
|
<button class="text-white/70 hover:text-white">
|
||||||
|
<LogoutOutlined />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</aside>
|
||||||
|
|
||||||
<section class="bg-gray-50">
|
<!-- 主内容区 -->
|
||||||
<div class="mx-auto max-w-screen-xl px-4 py-14">
|
<main class="flex-1 ml-64">
|
||||||
<a-typography-title :level="2" class="!mb-2">{{ $t('home.coreCapabilities') }}</a-typography-title>
|
<!-- 顶部栏 -->
|
||||||
<a-typography-paragraph class="!text-gray-500 !mb-8">
|
<header class="bg-white/85 backdrop-blur-xl border-b border-white/20 sticky top-0 z-50 px-8 py-4">
|
||||||
{{ $t('home.coreCapabilitiesDesc') }}
|
<div class="flex items-center justify-between">
|
||||||
</a-typography-paragraph>
|
<!-- 搜索 -->
|
||||||
|
<div class="relative w-96">
|
||||||
<a-row :gutter="[16, 16]">
|
<input
|
||||||
<a-col v-for="item in capabilities" :key="item.title" :xs="24" :md="12" :lg="8">
|
v-model="searchQuery"
|
||||||
<a-card :title="item.title">
|
type="text"
|
||||||
<template #extra>
|
placeholder="🔍 搜索设备、订单、员工、文档..."
|
||||||
<a-tag color="green">{{ item.badge }}</a-tag>
|
class="w-full px-5 py-3 bg-gray-100 rounded-xl border-0 focus:ring-2 focus:ring-purple-500 focus:bg-white transition-all"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧 -->
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<!-- 全屏 -->
|
||||||
|
<button class="text-gray-500 hover:text-purple-600 transition-colors" @click="toggleFullscreen">
|
||||||
|
<ExpandOutlined class="text-lg" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 消息 -->
|
||||||
|
<a-popover trigger="click">
|
||||||
|
<template #content>
|
||||||
|
<div class="w-64">
|
||||||
|
<div class="font-medium mb-2">通知中心</div>
|
||||||
|
<div class="text-sm text-gray-500">暂无新通知</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<a-typography-paragraph class="!mb-0 !text-gray-600">
|
<button class="relative text-gray-500 hover:text-purple-600 transition-colors">
|
||||||
{{ item.desc }}
|
<Badge :count="3" :offset="[-2, 2]">
|
||||||
</a-typography-paragraph>
|
<BellOutlined class="text-lg" />
|
||||||
</a-card>
|
</Badge>
|
||||||
</a-col>
|
</button>
|
||||||
</a-row>
|
</a-popover>
|
||||||
</div>
|
|
||||||
</section>
|
<!-- 语言 -->
|
||||||
|
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||||
<section>
|
<GlobalOutlined class="text-lg" />
|
||||||
<div class="mx-auto max-w-screen-xl px-4 py-14">
|
</button>
|
||||||
<a-row :gutter="[24, 24]">
|
|
||||||
<a-col :xs="24" :lg="12">
|
<!-- 用户 -->
|
||||||
<a-typography-title :level="2" class="!mb-2">{{ $t('home.payToActivate') }}</a-typography-title>
|
<div class="flex items-center gap-3 pl-6 border-l border-gray-200">
|
||||||
<a-typography-paragraph class="!text-gray-600 !mb-6">
|
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold">
|
||||||
{{ $t('home.payToActivateDesc') }}
|
A
|
||||||
</a-typography-paragraph>
|
</div>
|
||||||
<a-button type="primary" @click="navigateTo('/flow')">{{ $t('home.viewFullFlow') }}</a-button>
|
<div>
|
||||||
</a-col>
|
<p class="font-medium text-gray-800">Admin</p>
|
||||||
<a-col :xs="24" :lg="12">
|
<p class="text-xs text-gray-500">超级管理员</p>
|
||||||
<a-card>
|
</div>
|
||||||
<a-steps direction="vertical" :current="-1" size="small">
|
</div>
|
||||||
<a-step :title="$t('home.selectProduct')" :description="$t('home.selectProductDesc')" />
|
</div>
|
||||||
<a-step :title="$t('home.placeOrder')" :description="$t('home.placeOrderDesc')" />
|
</div>
|
||||||
<a-step :title="$t('home.createTenant')" :description="$t('home.createTenantDesc')" />
|
</header>
|
||||||
<a-step :title="$t('home.initModules')" :description="$t('home.initModulesDesc')" />
|
|
||||||
<a-step :title="$t('home.deliverOnline')" :description="$t('home.deliverOnlineDesc')" />
|
<!-- 内容区域 -->
|
||||||
</a-steps>
|
<div class="p-8">
|
||||||
</a-card>
|
<!-- 欢迎区 -->
|
||||||
</a-col>
|
<div class="mb-8">
|
||||||
</a-row>
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">
|
||||||
</div>
|
早上好，管理员！
|
||||||
</section>
|
</h2>
|
||||||
|
<p class="text-gray-500">今天是 {{ currentDate }}，本周还有 <span class="text-purple-600 font-semibold">{{ remainingDays }}</span> 天工作日</p>
|
||||||
<section class="bg-gray-50">
|
</div>
|
||||||
<div class="mx-auto max-w-screen-xl px-4 py-14">
|
|
||||||
<a-typography-title :level="2" class="!mb-2">{{ $t('home.templatePluginEcosystem') }}</a-typography-title>
|
<!-- 数据概览 -->
|
||||||
<a-typography-paragraph class="!text-gray-500 !mb-8">
|
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||||
{{ $t('home.templatePluginDesc') }}
|
<div class="stat-card blue bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||||
</a-typography-paragraph>
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||||
<a-tabs>
|
<SettingOutlined class="text-blue-600 text-xl" />
|
||||||
<a-tab-pane key="template" :tab="$t('home.template')">
|
</div>
|
||||||
<a-row :gutter="[16, 16]">
|
<span class="text-green-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 12%</span>
|
||||||
<a-col :xs="24" :md="12">
|
</div>
|
||||||
<a-card :title="$t('home.industryTemplate')">
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">128</h3>
|
||||||
<a-typography-paragraph class="!mb-0 !text-gray-600">
|
<p class="text-gray-500 text-sm">设备总数</p>
|
||||||
{{ $t('home.industryTemplateDesc') }}
|
</div>
|
||||||
</a-typography-paragraph>
|
|
||||||
</a-card>
|
<div class="stat-card green bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||||
</a-col>
|
<div class="flex items-center justify-between mb-4">
|
||||||
<a-col :xs="24" :md="12">
|
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||||||
<a-card :title="$t('home.deliveryStandard')">
|
<AppstoreOutlined class="text-green-600 text-xl" />
|
||||||
<a-typography-paragraph class="!mb-0 !text-gray-600">
|
</div>
|
||||||
{{ $t('home.deliveryStandardDesc') }}
|
<span class="text-green-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 8%</span>
|
||||||
</a-typography-paragraph>
|
</div>
|
||||||
</a-card>
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">5,230</h3>
|
||||||
</a-col>
|
<p class="text-gray-500 text-sm">库存物料</p>
|
||||||
</a-row>
|
</div>
|
||||||
</a-tab-pane>
|
|
||||||
<a-tab-pane key="plugin" :tab="$t('home.plugin')">
|
<div class="stat-card orange bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||||
<a-row :gutter="[16, 16]">
|
<div class="flex items-center justify-between mb-4">
|
||||||
<a-col :xs="24" :md="12">
|
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||||||
<a-card :title="$t('home.capabilityExtend')">
|
<ClockCircleOutlined class="text-orange-600 text-xl" />
|
||||||
<a-typography-paragraph class="!mb-0 !text-gray-600">
|
</div>
|
||||||
{{ $t('home.capabilityExtendDesc') }}
|
<span class="text-red-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 5</span>
|
||||||
</a-typography-paragraph>
|
</div>
|
||||||
</a-card>
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">12</h3>
|
||||||
</a-col>
|
<p class="text-gray-500 text-sm">待审批</p>
|
||||||
<a-col :xs="24" :md="12">
|
</div>
|
||||||
<a-card :title="$t('home.upgradeAuth')">
|
|
||||||
<a-typography-paragraph class="!mb-0 !text-gray-600">
|
<div class="stat-card purple bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||||
{{ $t('home.upgradeAuthDesc') }}
|
<div class="flex items-center justify-between mb-4">
|
||||||
</a-typography-paragraph>
|
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||||
</a-card>
|
<LineChartOutlined class="text-purple-600 text-xl" />
|
||||||
</a-col>
|
</div>
|
||||||
</a-row>
|
<span class="text-green-500 text-sm font-medium flex items-center gap-1"><ArrowUpOutlined /> 15%</span>
|
||||||
</a-tab-pane>
|
</div>
|
||||||
</a-tabs>
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">¥89.5<span class="text-lg">万</span></h3>
|
||||||
|
<p class="text-gray-500 text-sm">本月支出</p>
|
||||||
<div class="mt-6">
|
</div>
|
||||||
<a-button @click="navigateTo('/market')">{{ $t('home.exploreMarket') }}</a-button>
|
</div>
|
||||||
|
|
||||||
|
<!-- 中间区域 -->
|
||||||
|
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||||
|
<!-- 快捷入口 -->
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||||
|
<h3 class="font-bold text-lg text-gray-800 mb-4 flex items-center gap-2">
|
||||||
|
<BoltOutlined class="text-yellow-500" />
|
||||||
|
快捷入口
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<button
|
||||||
|
v-for="shortcut in shortcuts"
|
||||||
|
:key="shortcut.label"
|
||||||
|
class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium hover:bg-purple-500 hover:text-white transition-all"
|
||||||
|
>
|
||||||
|
<component :is="shortcut.icon" :style="{ color: shortcut.color }" />
|
||||||
|
{{ shortcut.label }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 待办事项 -->
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover shadow-sm col-span-2">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||||
|
<CheckSquareOutlined class="text-red-500" />
|
||||||
|
待办事项
|
||||||
|
<span class="bg-red-100 text-red-600 px-2 py-0.5 rounded-full text-xs font-medium">5</span>
|
||||||
|
</h3>
|
||||||
|
<button class="text-purple-600 text-sm font-medium hover:underline">查看全部</button>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div
|
||||||
|
v-for="todo in todos"
|
||||||
|
:key="todo.id"
|
||||||
|
class="todo-item flex items-center gap-4 p-3 rounded-xl cursor-pointer hover:bg-purple-50 transition-all"
|
||||||
|
>
|
||||||
|
<div :class="['w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0', todo.bgColor]">
|
||||||
|
<component :is="todo.icon" :class="[todo.textColor]" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-medium text-gray-800">{{ todo.title }}</p>
|
||||||
|
<p class="text-xs text-gray-500">{{ todo.subtitle }}</p>
|
||||||
|
</div>
|
||||||
|
<span :class="['text-xs font-medium', todo.timeColor]">{{ todo.time }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 应用模块 -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h3 class="font-bold text-xl text-gray-800">
|
||||||
|
<AppstoreOutlined class="text-purple-500 mr-2" />
|
||||||
|
应用模块
|
||||||
|
</h3>
|
||||||
|
<button class="text-purple-600 text-sm font-medium hover:underline">自定义模块</button>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-6 gap-4">
|
||||||
|
<div
|
||||||
|
v-for="app in apps"
|
||||||
|
:key="app.name"
|
||||||
|
class="app-card bg-white rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer shadow-sm"
|
||||||
|
@click="navigateToApp(app.route)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="app-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-4 shadow-lg"
|
||||||
|
:style="{ background: app.gradient }"
|
||||||
|
>
|
||||||
|
<component :is="app.icon" class="text-white text-2xl" />
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold text-gray-800 mb-1">{{ app.name }}</h4>
|
||||||
|
<p class="text-xs text-gray-500">{{ app.stats }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部区域 -->
|
||||||
|
<div class="grid grid-cols-2 gap-6">
|
||||||
|
<!-- 经营概览图表 -->
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||||
|
<BarChartOutlined class="text-blue-500" />
|
||||||
|
经营概览
|
||||||
|
</h3>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button
|
||||||
|
v-for="period in ['本周', '本月', '本季']"
|
||||||
|
:key="period"
|
||||||
|
:class="['px-3 py-1 text-xs rounded-lg font-medium', activePeriod === period ? 'bg-purple-100 text-purple-600' : 'bg-gray-100 text-gray-600']"
|
||||||
|
@click="activePeriod = period"
|
||||||
|
>
|
||||||
|
{{ period }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-48 flex items-end gap-4">
|
||||||
|
<div
|
||||||
|
v-for="(bar, index) in chartData"
|
||||||
|
:key="index"
|
||||||
|
class="flex-1 flex flex-col items-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80 cursor-pointer"
|
||||||
|
:style="{ height: bar + '%' }"
|
||||||
|
></div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">{{ weekDays[index] }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最新公告 -->
|
||||||
|
<div class="bg-white rounded-2xl p-6 card-hover shadow-sm">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||||
|
<SoundOutlined class="text-red-500" />
|
||||||
|
最新公告
|
||||||
|
</h3>
|
||||||
|
<button class="text-purple-600 text-sm font-medium hover:underline">全部公告</button>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div
|
||||||
|
v-for="notice in notices"
|
||||||
|
:key="notice.id"
|
||||||
|
:class="['p-4 rounded-xl border-l-4 cursor-pointer hover:scale-[1.02] transition-transform', notice.bgColor, notice.borderColor]"
|
||||||
|
>
|
||||||
|
<h4 class="font-medium text-gray-800 mb-1">{{ notice.title }}</h4>
|
||||||
|
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||||||
|
<span><UserOutlined class="mr-1" />{{ notice.author }}</span>
|
||||||
|
<span><ClockCircleOutlined class="mr-1" />{{ notice.date }}</span>
|
||||||
|
<span><EyeOutlined class="mr-1" />{{ notice.views }} 阅读</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</main>
|
||||||
|
|
||||||
<section class="bg-white">
|
|
||||||
<div class="mx-auto max-w-screen-xl px-4 py-12 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
||||||
<div>
|
|
||||||
<div class="text-xl font-semibold">{{ $t('home.ctaTitle') }}</div>
|
|
||||||
<div class="mt-1 text-gray-500">{{ $t('home.ctaDesc') }}</div>
|
|
||||||
</div>
|
|
||||||
<a-space>
|
|
||||||
<a-button size="large" @click="navigateTo('/products')">{{ $t('home.viewProducts') }}</a-button>
|
|
||||||
<a-button type="primary" size="large" @click="navigateTo('/contact')">{{ $t('home.contactNow') }}</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { usePageSeo } from '@/composables/usePageSeo'
|
import { ref, computed, h } from 'vue'
|
||||||
import { productMatrix } from '@/config/products'
|
import {
|
||||||
const { t } = useI18n()
|
HomeOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
ShoppingCartOutlined,
|
||||||
|
InboxOutlined,
|
||||||
|
WalletOutlined,
|
||||||
|
TeamOutlined,
|
||||||
|
ProjectOutlined,
|
||||||
|
UserOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
ExpandOutlined,
|
||||||
|
BellOutlined,
|
||||||
|
GlobalOutlined,
|
||||||
|
ArrowUpOutlined,
|
||||||
|
CheckSquareOutlined,
|
||||||
|
BoltOutlined,
|
||||||
|
AppstoreOutlined,
|
||||||
|
BarChartOutlined,
|
||||||
|
SoundOutlined,
|
||||||
|
EyeOutlined,
|
||||||
|
ClockCircleOutlined,
|
||||||
|
LineChartOutlined,
|
||||||
|
SearchOutlined,
|
||||||
|
ShoppingOutlined,
|
||||||
|
TruckOutlined,
|
||||||
|
CalendarOutlined,
|
||||||
|
DollarOutlined,
|
||||||
|
BoxPlotOutlined,
|
||||||
|
ToolOutlined,
|
||||||
|
AuditOutlined,
|
||||||
|
ExperimentOutlined,
|
||||||
|
FileTextOutlined,
|
||||||
|
} from '@ant-design/icons-vue'
|
||||||
|
|
||||||
// 视频路径（使用 public 目录，可直接通过 URL 访问）
|
// 响应式数据
|
||||||
const videoSrc = '/videos/websopy-intro.mp4'
|
const searchQuery = ref('')
|
||||||
|
const activeMenu = ref('home')
|
||||||
|
const activePeriod = ref('本周')
|
||||||
|
|
||||||
usePageSeo({
|
// 当前日期
|
||||||
title: t('pageTitle.homeTitle'),
|
const currentDate = computed(() => {
|
||||||
description: t('pageTitle.homeDescription')
|
const now = new Date()
|
||||||
|
return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 星期${['日', '一', '二', '三', '四', '五', '六'][now.getDay()]}`
|
||||||
})
|
})
|
||||||
|
|
||||||
const go = (url?: string) => {
|
// 剩余工作日
|
||||||
if (!url) return
|
const remainingDays = computed(() => {
|
||||||
if (/^https?:\/\//i.test(url)) {
|
const now = new Date()
|
||||||
if (import.meta.client) window.open(url, '_blank', 'noopener,noreferrer')
|
const day = now.getDay()
|
||||||
return
|
if (day === 0 || day === 6) return 0
|
||||||
}
|
return 5 - day
|
||||||
return navigateTo(url)
|
})
|
||||||
}
|
|
||||||
|
|
||||||
// 视频加载错误处理
|
// 快捷入口
|
||||||
const handleVideoError = (e: Event) => {
|
const shortcuts = [
|
||||||
console.error('视频加载失败:', e)
|
{ label: '设备巡检', icon: SearchOutlined, color: '#667eea' },
|
||||||
}
|
{ label: '采购申请', icon: ShoppingOutlined, color: '#11998e' },
|
||||||
|
{ label: '入库登记', icon: TruckOutlined, color: '#f5576c' },
|
||||||
const products = productMatrix
|
{ label: '请假申请', icon: CalendarOutlined, color: '#fc8181' },
|
||||||
|
{ label: '费用报销', icon: DollarOutlined, color: '#f6ad55' },
|
||||||
const capabilities = [
|
{ label: '库存查询', icon: BoxPlotOutlined, color: '#63b3ed' },
|
||||||
{
|
|
||||||
title: t('home.openclawAI'),
|
|
||||||
badge: 'NEW',
|
|
||||||
desc: t('home.openclawAIDesc')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('home.ragKnowledge'),
|
|
||||||
badge: 'AI',
|
|
||||||
desc: t('home.ragKnowledgeDesc')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('home.saasMultiTenant'),
|
|
||||||
badge: '核心',
|
|
||||||
desc: t('home.saasMultiTenantDesc')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('home.privateDeploy'),
|
|
||||||
badge: '可选',
|
|
||||||
desc: t('home.privateDeployDesc')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('home.templateMarket'),
|
|
||||||
badge: '生态',
|
|
||||||
desc: t('home.templateMarketDesc')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('home.autoActivate'),
|
|
||||||
badge: '交付',
|
|
||||||
desc: t('home.autoActivateDesc')
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
// 待办事项
|
||||||
|
const todos = [
|
||||||
|
{ id: 1, title: '审批 - 张三的报销单', subtitle: '差旅费 ¥2,580.00', time: '2小时前', icon: CheckSquareOutlined, bgColor: 'bg-red-100', textColor: 'text-red-600', timeColor: 'text-red-500' },
|
||||||
|
{ id: 2, title: '巡检 - 3号车间设备待检', subtitle: '包含12台设备', time: '4小时前', icon: SearchOutlined, bgColor: 'bg-yellow-100', textColor: 'text-yellow-600', timeColor: 'text-yellow-600' },
|
||||||
|
{ id: 3, title: '采购 - 办公用品采购单', subtitle: '待审批', time: '1天前', icon: ShoppingCartOutlined, bgColor: 'bg-blue-100', textColor: 'text-blue-600', timeColor: 'text-blue-600' },
|
||||||
|
{ id: 4, title: '保养 - 空压机定期保养', subtitle: '例行保养', time: '2天前', icon: ToolOutlined, bgColor: 'bg-green-100', textColor: 'text-green-600', timeColor: 'text-green-600' },
|
||||||
|
]
|
||||||
|
|
||||||
|
// 应用模块
|
||||||
|
const apps = [
|
||||||
|
{ name: '设备管理', icon: SettingOutlined, gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', stats: '128 设备', route: '/admin/device' },
|
||||||
|
{ name: '采购管理', icon: ShoppingCartOutlined, gradient: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', stats: '23 订单', route: '/admin/purchase' },
|
||||||
|
{ name: '仓储物流', icon: InboxOutlined, gradient: 'linear-gradient(135deg, #f5576c 0%, #f093fb 100%)', stats: '5,230 物料', route: '/admin/warehouse' },
|
||||||
|
{ name: '财务管理', icon: WalletOutlined, gradient: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)', stats: '¥89.5万', route: '/admin/finance' },
|
||||||
|
{ name: '人力资源', icon: TeamOutlined, gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', stats: '56 员工', route: '/admin/hr' },
|
||||||
|
{ name: '协同办公', icon: ProjectOutlined, gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', stats: '8 流程', route: '/admin/office' },
|
||||||
|
]
|
||||||
|
|
||||||
|
// 图表数据
|
||||||
|
const chartData = [60, 75, 45, 90, 85, 40, 30]
|
||||||
|
const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
|
|
||||||
|
// 公告
|
||||||
|
const notices = [
|
||||||
|
{ id: 1, title: '关于清明节放假安排的通知', author: '人事行政部', date: '2026-04-01', views: '1,258', bgColor: 'bg-red-50', borderColor: 'border-red-500' },
|
||||||
|
{ id: 2, title: '2026年第一季度财报公告', author: '财务部', date: '2026-03-28', views: '986', bgColor: 'bg-blue-50', borderColor: 'border-blue-500' },
|
||||||
|
{ id: 3, title: '新版本系统功能更新说明', author: '技术部', date: '2026-03-25', views: '756', bgColor: 'bg-green-50', borderColor: 'border-green-500' },
|
||||||
|
]
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
const toggleFullscreen = () => {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
document.documentElement.requestFullscreen()
|
||||||
|
} else {
|
||||||
|
document.exitFullscreen()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const navigateToApp = (route: string) => {
|
||||||
|
navigateTo(route)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.sidebar {
|
||||||
|
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item:hover,
|
||||||
|
.sidebar-item.active {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card:hover .app-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-icon {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-badge {
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.7; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-btn {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-btn:hover {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
597
app/pages/tiantian-system/index.vue
Normal file
597
app/pages/tiantian-system/index.vue
Normal file
@@ -0,0 +1,597 @@
|
|||||||
|
<template>
|
||||||
|
<div class="console-home">
|
||||||
|
<!-- 顶部欢迎区 -->
|
||||||
|
<div class="welcome-section">
|
||||||
|
<div class="welcome-content">
|
||||||
|
<h1 class="welcome-title">欢迎回来 👋</h1>
|
||||||
|
<p class="welcome-subtitle">管理您的应用、订单与账号，一站式控制台</p>
|
||||||
|
</div>
|
||||||
|
<div class="welcome-actions">
|
||||||
|
<a-button type="primary" size="large" @click="navigateTo('/console/apps')">
|
||||||
|
<template #icon><AppstoreOutlined /></template>
|
||||||
|
进入应用中心
|
||||||
|
</a-button>
|
||||||
|
<a-button size="large" @click="navigateTo('/market')">
|
||||||
|
<template #icon><ShopOutlined /></template>
|
||||||
|
浏览应用商店
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 快捷入口 -->
|
||||||
|
<div class="section-block">
|
||||||
|
<div class="section-header">
|
||||||
|
<h3 class="section-title">快捷入口</h3>
|
||||||
|
</div>
|
||||||
|
<div class="quick-cards-grid">
|
||||||
|
<div
|
||||||
|
v-for="card in quickCards"
|
||||||
|
:key="card.to"
|
||||||
|
class="quick-card"
|
||||||
|
@click="navigateTo(card.to)"
|
||||||
|
>
|
||||||
|
<div class="quick-card-icon" :style="{ background: card.bg }">
|
||||||
|
<component :is="card.icon" :style="{ fontSize: '22px', color: card.color }" />
|
||||||
|
</div>
|
||||||
|
<div class="quick-card-info">
|
||||||
|
<div class="quick-card-label">{{ card.label }}</div>
|
||||||
|
<div class="quick-card-desc">{{ card.desc }}</div>
|
||||||
|
</div>
|
||||||
|
<RightOutlined class="quick-card-arrow" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最近使用的应用 -->
|
||||||
|
<div class="section-block">
|
||||||
|
<div class="section-header">
|
||||||
|
<h3 class="section-title">最近使用</h3>
|
||||||
|
<NuxtLink to="/console/apps">
|
||||||
|
<a-button type="link">
|
||||||
|
查看全部 <RightOutlined />
|
||||||
|
</a-button>
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 加载中 -->
|
||||||
|
<div v-if="recentAppsLoading" class="recent-apps-loading">
|
||||||
|
<a-skeleton active :paragraph="{ rows: 1 }" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 应用列表 -->
|
||||||
|
<div v-else-if="recentApps.length > 0" class="recent-apps-grid">
|
||||||
|
<div
|
||||||
|
v-for="app in recentApps.slice(0, 6)"
|
||||||
|
:key="app.productId"
|
||||||
|
class="recent-app-card"
|
||||||
|
@click="handleAppClick(app)"
|
||||||
|
>
|
||||||
|
<div class="recent-app-icon" :style="{ background: iconBgColor(app.productName) }">
|
||||||
|
<img
|
||||||
|
v-if="app.icon"
|
||||||
|
:src="app.icon"
|
||||||
|
:alt="app.productName"
|
||||||
|
class="recent-app-icon-img"
|
||||||
|
/>
|
||||||
|
<span v-else class="recent-app-icon-text">{{ appTypeIcon(app.appType) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="recent-app-info">
|
||||||
|
<div class="recent-app-name">{{ app.productName }}</div>
|
||||||
|
<div class="recent-app-meta">
|
||||||
|
<span class="recent-app-type">{{ appTypeName(app.type, app.appType) }}</span>
|
||||||
|
<span class="recent-app-time">{{ formatTime(app.updateTime || app.createTime) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="recent-app-entries">
|
||||||
|
<template v-for="entry in getAppEntries(app)" :key="entry.type">
|
||||||
|
<a-button
|
||||||
|
v-if="entry.available"
|
||||||
|
:type="entry.isPrimary ? 'primary' : 'default'"
|
||||||
|
size="small"
|
||||||
|
class="recent-app-enter-btn"
|
||||||
|
@click.stop="handleEntryClick(entry, app)"
|
||||||
|
>
|
||||||
|
<component :is="entry.icon" />
|
||||||
|
{{ entry.label }}
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<div v-else class="recent-apps-empty">
|
||||||
|
<a-empty description="暂无最近使用的应用">
|
||||||
|
<template #image>
|
||||||
|
<div class="empty-icon">📦</div>
|
||||||
|
</template>
|
||||||
|
<a-button type="primary" @click="navigateTo('/console/apps')">去创建应用</a-button>
|
||||||
|
</a-empty>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 应用详情抽屉 -->
|
||||||
|
<AppDetail v-model:open="detailOpen" :app="selectedApp" @deleted="handleDeletedFromDetail" @updated="handleUpdatedFromDetail" />
|
||||||
|
|
||||||
|
<!-- 小程序扫码弹窗 -->
|
||||||
|
<QrCodeModal
|
||||||
|
v-model:open="qrOpen"
|
||||||
|
:qrcode-url="qrApp?.qrcode"
|
||||||
|
:app-name="qrApp?.productName"
|
||||||
|
:title="qrApp ? (APP_TYPE_NAME[qrApp.appType ?? 10] || '小程序') + '二维码' : ''"
|
||||||
|
:tip="qrApp ? getScanTip(qrApp.appType ?? 20) : ''"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
AppstoreOutlined,
|
||||||
|
GiftOutlined,
|
||||||
|
SafetyCertificateOutlined,
|
||||||
|
ShoppingCartOutlined,
|
||||||
|
ShoppingOutlined,
|
||||||
|
UserOutlined,
|
||||||
|
ShopOutlined,
|
||||||
|
RightOutlined,
|
||||||
|
TeamOutlined,
|
||||||
|
CustomerServiceOutlined,
|
||||||
|
GlobalOutlined,
|
||||||
|
QrcodeOutlined,
|
||||||
|
DownloadOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
} from '@ant-design/icons-vue'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
import { getJoinedApps, recordVisit } from '@/api/app/appProduct'
|
||||||
|
import type { AppProduct } from '@/api/app/appProduct/model'
|
||||||
|
import { APP_TYPE, APP_TYPE_NAME } from '@/api/app/appProduct/model'
|
||||||
|
import AppDetail from '@/components/developer/AppDetail.vue'
|
||||||
|
import QrCodeModal from '@/components/QrCodeModal.vue'
|
||||||
|
import { getAppEntries, executeEntry, getScanTip } from '@/utils/appEntry'
|
||||||
|
import type { AppEntry } from '@/utils/appEntry'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
definePageMeta({ layout: 'console' })
|
||||||
|
|
||||||
|
const userId = import.meta.client ? localStorage.getItem('UserId') : null
|
||||||
|
|
||||||
|
// 快捷入口配置
|
||||||
|
const quickCards = [
|
||||||
|
{
|
||||||
|
label: '应用中心',
|
||||||
|
desc: '管理我的应用',
|
||||||
|
to: '/console/apps',
|
||||||
|
icon: AppstoreOutlined,
|
||||||
|
bg: '#eff6ff',
|
||||||
|
color: '#3b82f6',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '已购产品',
|
||||||
|
desc: '查看授权与订阅',
|
||||||
|
to: '/console/products',
|
||||||
|
icon: ShoppingOutlined,
|
||||||
|
bg: '#f0fdf4',
|
||||||
|
color: '#22c55e',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '订单记录',
|
||||||
|
desc: '历史订单与账单',
|
||||||
|
to: '/console/orders',
|
||||||
|
icon: ShoppingCartOutlined,
|
||||||
|
bg: '#fff7ed',
|
||||||
|
color: '#f97316',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '优惠券',
|
||||||
|
desc: '查看可用优惠',
|
||||||
|
to: '/console/coupons',
|
||||||
|
icon: GiftOutlined,
|
||||||
|
bg: '#fdf4ff',
|
||||||
|
color: '#a855f7',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '成员管理',
|
||||||
|
desc: '团队与权限管理',
|
||||||
|
to: '/console/account/members',
|
||||||
|
icon: TeamOutlined,
|
||||||
|
bg: '#fefce8',
|
||||||
|
color: '#eab308',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '工单管理',
|
||||||
|
desc: '技术支持与反馈',
|
||||||
|
to: '/console/tickets',
|
||||||
|
icon: CustomerServiceOutlined,
|
||||||
|
bg: '#f0f9ff',
|
||||||
|
color: '#0ea5e9',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '账号安全',
|
||||||
|
desc: '密码与安全设置',
|
||||||
|
to: '/console/account/security',
|
||||||
|
icon: SafetyCertificateOutlined,
|
||||||
|
bg: '#fff1f2',
|
||||||
|
color: '#f43f5e',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
// 最近使用的应用
|
||||||
|
const recentApps = ref<AppProduct[]>([])
|
||||||
|
const recentAppsLoading = ref(false)
|
||||||
|
const detailOpen = ref(false)
|
||||||
|
const selectedApp = ref<AppProduct | null>(null)
|
||||||
|
|
||||||
|
// 跳转方法（模板中不能直接调用 navigateTo）
|
||||||
|
function navigateTo(path: string) {
|
||||||
|
router.push(path)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 入口处理
|
||||||
|
function handleEntryClick(entry: AppEntry, app: AppProduct) {
|
||||||
|
if (entry.type === 'scan-qr') {
|
||||||
|
qrApp.value = app
|
||||||
|
qrOpen.value = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
executeEntry(entry)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 扫码弹窗
|
||||||
|
const qrOpen = ref(false)
|
||||||
|
const qrApp = ref<AppProduct | null>(null)
|
||||||
|
|
||||||
|
// 应用类型名称（使用统一枚举）
|
||||||
|
function appTypeName(type?: number, appType?: number): string {
|
||||||
|
return APP_TYPE_NAME[type ?? 10] ?? 'Web 应用'
|
||||||
|
}
|
||||||
|
|
||||||
|
function appTypeIcon(appType?: number): string {
|
||||||
|
const iconMap: Record<number, string> = {
|
||||||
|
[APP_TYPE.WEBSITE]: '🌐',
|
||||||
|
[APP_TYPE.WECHAT_MP]: '📱',
|
||||||
|
[APP_TYPE.DOUYIN_MP]: '🎵',
|
||||||
|
[APP_TYPE.BAIDU_MP]: '🔍',
|
||||||
|
[APP_TYPE.ALIPAY_MP]: '💎',
|
||||||
|
[APP_TYPE.ANDROID]: '🤖',
|
||||||
|
[APP_TYPE.IOS]: '🍎',
|
||||||
|
[APP_TYPE.MACOS]: '💻',
|
||||||
|
[APP_TYPE.WINDOWS]: '🪟',
|
||||||
|
[APP_TYPE.PLUGIN]: '🔌',
|
||||||
|
}
|
||||||
|
return iconMap[appType ?? 10] ?? '🌐'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图标背景色
|
||||||
|
const PALETTE = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae', '#87d068', '#108ee9']
|
||||||
|
|
||||||
|
function iconBgColor(name?: string) {
|
||||||
|
if (!name) return PALETTE[0]
|
||||||
|
let h = 0
|
||||||
|
for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xffffffff
|
||||||
|
return PALETTE[Math.abs(h) % PALETTE.length]
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(timestamp?: string | number | Date) {
|
||||||
|
if (!timestamp) return '-'
|
||||||
|
const date = typeof timestamp === 'string' ? new Date(timestamp) : new Date(timestamp)
|
||||||
|
const now = new Date()
|
||||||
|
const diff = now.getTime() - date.getTime()
|
||||||
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||||
|
|
||||||
|
if (days === 0) {
|
||||||
|
const hours = Math.floor(diff / (1000 * 60 * 60))
|
||||||
|
if (hours === 0) {
|
||||||
|
const minutes = Math.floor(diff / (1000 * 60))
|
||||||
|
return minutes <= 1 ? '刚刚' : `${minutes}分钟前`
|
||||||
|
}
|
||||||
|
return `${hours}小时前`
|
||||||
|
} else if (days === 1) {
|
||||||
|
return '昨天'
|
||||||
|
} else if (days < 7) {
|
||||||
|
return `${days}天前`
|
||||||
|
} else {
|
||||||
|
return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载最近使用的应用（包括我创建的和被邀请参与的应用）
|
||||||
|
async function loadRecentApps() {
|
||||||
|
if (!userId) return
|
||||||
|
|
||||||
|
recentAppsLoading.value = true
|
||||||
|
try {
|
||||||
|
const uid = Number(userId)
|
||||||
|
|
||||||
|
// 获取我参与的所有应用（后端按 app_user.update_time 排序，实现"最近使用"）
|
||||||
|
const result = await getJoinedApps({ page: 1, limit: 10 })
|
||||||
|
recentApps.value = result?.list || []
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载最近应用失败', e)
|
||||||
|
} finally {
|
||||||
|
recentAppsLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAppClick(app: AppProduct) {
|
||||||
|
// 记录访问（异步，不阻塞）
|
||||||
|
if (app.productId) {
|
||||||
|
recordVisit(app.productId)
|
||||||
|
}
|
||||||
|
selectedApp.value = app
|
||||||
|
detailOpen.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDeletedFromDetail() {
|
||||||
|
selectedApp.value = null
|
||||||
|
detailOpen.value = false
|
||||||
|
loadRecentApps()
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUpdatedFromDetail(updatedApp: AppProduct) {
|
||||||
|
const index = recentApps.value.findIndex((app) => app.productId === updatedApp.productId)
|
||||||
|
if (index !== -1) {
|
||||||
|
recentApps.value[index] = { ...recentApps.value[index], ...updatedApp }
|
||||||
|
}
|
||||||
|
if (selectedApp.value?.productId === updatedApp.productId) {
|
||||||
|
selectedApp.value = { ...selectedApp.value, ...updatedApp }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadRecentApps()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* ===== 页面整体 ===== */
|
||||||
|
.console-home {
|
||||||
|
padding-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 欢迎区 ===== */
|
||||||
|
.welcome-section {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 32px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-subtitle {
|
||||||
|
font-size: 15px;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.welcome-section {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.welcome-actions {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 区块样式 ===== */
|
||||||
|
.section-block {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(0, 0, 0, 0.88);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 快捷入口 ===== */
|
||||||
|
.quick-cards-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
background: #fafafa;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-card:hover {
|
||||||
|
background: #fff;
|
||||||
|
border-color: #d6e4ff;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-card-icon {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-card-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-card-label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(0, 0, 0, 0.88);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-card-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-card-arrow {
|
||||||
|
color: rgba(0, 0, 0, 0.25);
|
||||||
|
font-size: 12px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-card:hover .quick-card-arrow {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 最近使用 ===== */
|
||||||
|
.recent-apps-loading {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-apps-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
background: #fafafa;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-card:hover {
|
||||||
|
background: #fff;
|
||||||
|
border-color: #d6e4ff;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-icon-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-icon-text {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-name {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(0, 0, 0, 0.88);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-type {
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
background: #f0f0f0;
|
||||||
|
padding: 1px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-time {
|
||||||
|
color: rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-entries {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-card:hover .recent-app-entries {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-app-enter-btn {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端始终显示进入按钮 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.recent-app-entries {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-apps-empty {
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
681
docs/规划文档/create-doc.cjs
Normal file
681
docs/规划文档/create-doc.cjs
Normal file
@@ -0,0 +1,681 @@
|
|||||||
|
const { Document, Packer, Paragraph, TextRun, Table, TableRow, TableCell,
|
||||||
|
Header, Footer, AlignmentType, HeadingLevel, BorderStyle, WidthType,
|
||||||
|
ShadingType, VerticalAlign, PageNumber, PageBreak, LevelFormat } = require('docx');
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
|
const border = { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" };
|
||||||
|
const borders = { top: border, bottom: border, left: border, right: border };
|
||||||
|
const headerBorder = { style: BorderStyle.SINGLE, size: 1, color: "FFFFFF" };
|
||||||
|
const headerBorders = { top: headerBorder, bottom: headerBorder, left: headerBorder, right: headerBorder };
|
||||||
|
|
||||||
|
const cellMargins = { top: 80, bottom: 80, left: 120, right: 120 };
|
||||||
|
|
||||||
|
// 颜色定义
|
||||||
|
const colors = {
|
||||||
|
primary: "667EEA", // 主色 - 蓝紫渐变
|
||||||
|
secondary: "764BA2", // 副色
|
||||||
|
accent: "F093FB", // 强调色
|
||||||
|
lightBg: "F8F9FC", // 浅灰背景
|
||||||
|
headerBg: "667EEA", // 表头背景
|
||||||
|
text: "2D3748", // 正文文字
|
||||||
|
gray: "718096", // 灰色文字
|
||||||
|
};
|
||||||
|
|
||||||
|
// 创建文档
|
||||||
|
const doc = new Document({
|
||||||
|
styles: {
|
||||||
|
default: {
|
||||||
|
document: {
|
||||||
|
run: { font: "Arial", size: 24 } // 12pt = 24 half-points
|
||||||
|
}
|
||||||
|
},
|
||||||
|
paragraphStyles: [
|
||||||
|
{
|
||||||
|
id: "Heading1", name: "Heading 1", basedOn: "Normal", next: "Normal", quickFormat: true,
|
||||||
|
run: { size: 48, bold: true, font: "Arial", color: colors.primary },
|
||||||
|
paragraph: { spacing: { before: 400, after: 200 }, outlineLevel: 0 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Heading2", name: "Heading 2", basedOn: "Normal", next: "Normal", quickFormat: true,
|
||||||
|
run: { size: 36, bold: true, font: "Arial", color: colors.secondary },
|
||||||
|
paragraph: { spacing: { before: 300, after: 150 }, outlineLevel: 1 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Heading3", name: "Heading 3", basedOn: "Normal", next: "Normal", quickFormat: true,
|
||||||
|
run: { size: 28, bold: true, font: "Arial", color: colors.text },
|
||||||
|
paragraph: { spacing: { before: 200, after: 100 }, outlineLevel: 2 }
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
numbering: {
|
||||||
|
config: [
|
||||||
|
{
|
||||||
|
reference: "bullets",
|
||||||
|
levels: [{
|
||||||
|
level: 0, format: LevelFormat.BULLET, text: "\u2022", alignment: AlignmentType.LEFT,
|
||||||
|
style: { paragraph: { indent: { left: 720, hanging: 360 } } }
|
||||||
|
}, {
|
||||||
|
level: 1, format: LevelFormat.BULLET, text: "\u25E6", alignment: AlignmentType.LEFT,
|
||||||
|
style: { paragraph: { indent: { left: 1080, hanging: 360 } } }
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
reference: "numbers",
|
||||||
|
levels: [{
|
||||||
|
level: 0, format: LevelFormat.DECIMAL, text: "%1.", alignment: AlignmentType.LEFT,
|
||||||
|
style: { paragraph: { indent: { left: 720, hanging: 360 } } }
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
sections: [{
|
||||||
|
properties: {
|
||||||
|
page: {
|
||||||
|
size: { width: 12240, height: 15840 }, // A4
|
||||||
|
margin: { top: 1440, right: 1440, bottom: 1440, left: 1440 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
default: new Header({
|
||||||
|
children: [
|
||||||
|
new Paragraph({
|
||||||
|
children: [
|
||||||
|
new TextRun({ text: "天天系统 ERP", bold: true, color: colors.primary, size: 24 }),
|
||||||
|
new TextRun({ text: " 功能需求规划文档", color: colors.gray, size: 20 })
|
||||||
|
],
|
||||||
|
border: { bottom: { style: BorderStyle.SINGLE, size: 6, color: colors.primary } }
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
footers: {
|
||||||
|
default: new Footer({
|
||||||
|
children: [
|
||||||
|
new Paragraph({
|
||||||
|
children: [
|
||||||
|
new TextRun({ text: "第 ", color: colors.gray, size: 20 }),
|
||||||
|
new TextRun({ children: [PageNumber.CURRENT], color: colors.gray, size: 20 }),
|
||||||
|
new TextRun({ text: " 页", color: colors.gray, size: 20 }),
|
||||||
|
new TextRun({ text: " 天天系统 ERP - 机密文件", color: colors.gray, size: 20 })
|
||||||
|
],
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
border: { top: { style: BorderStyle.SINGLE, size: 6, color: colors.primary } }
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
// 封面
|
||||||
|
new Paragraph({ spacing: { before: 2400 } }),
|
||||||
|
new Paragraph({
|
||||||
|
children: [new TextRun({ text: "天天系统 ERP", bold: true, size: 72, color: colors.primary })],
|
||||||
|
alignment: AlignmentType.CENTER
|
||||||
|
}),
|
||||||
|
new Paragraph({
|
||||||
|
children: [new TextRun({ text: "功能需求规划文档", size: 48, color: colors.text })],
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
spacing: { before: 400 }
|
||||||
|
}),
|
||||||
|
new Paragraph({ spacing: { before: 1200 } }),
|
||||||
|
new Table({
|
||||||
|
width: { size: 5000, type: WidthType.DXA },
|
||||||
|
columnWidths: [5000],
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
rows: [
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({
|
||||||
|
borders,
|
||||||
|
shading: { fill: colors.lightBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [
|
||||||
|
new Paragraph({
|
||||||
|
children: [new TextRun({ text: "版本号：V1.0", size: 24, color: colors.text })],
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
spacing: { before: 100, after: 100 }
|
||||||
|
}),
|
||||||
|
new Paragraph({
|
||||||
|
children: [new TextRun({ text: "编制日期：2026年4月8日", size: 24, color: colors.text })],
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
spacing: { before: 100, after: 100 }
|
||||||
|
}),
|
||||||
|
new Paragraph({
|
||||||
|
children: [new TextRun({ text: "编制人：管理员", size: 24, color: colors.text })],
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
spacing: { before: 100, after: 100 }
|
||||||
|
}),
|
||||||
|
new Paragraph({
|
||||||
|
children: [new TextRun({ text: "状态：草稿", size: 24, color: colors.gray })],
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
spacing: { before: 100, after: 100 }
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 目录
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("目录")] }),
|
||||||
|
new Paragraph({ spacing: { before: 200 }, children: [new TextRun("1. 项目概述")]}),
|
||||||
|
new Paragraph({ spacing: { before: 100 }, children: [new TextRun("2. 功能模块总览")]}),
|
||||||
|
new Paragraph({ spacing: { before: 100 }, children: [new TextRun("3. 设备管理系统")]}),
|
||||||
|
new Paragraph({ spacing: { before: 100 }, children: [new TextRun("4. 采购管理系统")]}),
|
||||||
|
new Paragraph({ spacing: { before: 100 }, children: [new TextRun("5. 仓储物流系统")]}),
|
||||||
|
new Paragraph({ spacing: { before: 100 }, children: [new TextRun("6. 财务管理系统")]}),
|
||||||
|
new Paragraph({ spacing: { before: 100 }, children: [new TextRun("7. 人力资源系统")]}),
|
||||||
|
new Paragraph({ spacing: { before: 100 }, children: [new TextRun("8. 协同办公系统")]}),
|
||||||
|
new Paragraph({ spacing: { before: 100 }, children: [new TextRun("9. 应用主页设计")]}),
|
||||||
|
new Paragraph({ spacing: { before: 100 }, children: [new TextRun("10. 附录")]}),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 1. 项目概述
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("1. 项目概述")] }),
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("1.1 项目背景")] }),
|
||||||
|
new Paragraph({
|
||||||
|
spacing: { after: 200 },
|
||||||
|
children: [new TextRun("天天系统是一套面向中小型企业的综合管理信息系统，涵盖设备管理、采购管理、仓储物流、财务管理、人力资源和协同办公六大核心模块，旨在帮助企业实现数字化转型，提升运营效率。")]
|
||||||
|
}),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("1.2 项目目标")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("实现企业资源的一体化管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("优化业务流程，减少人工操作")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("提供实时数据支持决策分析")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("提升跨部门协作效率")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("降低运营成本，提高客户满意度")] }),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 2. 功能模块总览
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("2. 功能模块总览")] }),
|
||||||
|
new Paragraph({ spacing: { after: 200 }, children: [new TextRun("天天系统包含以下六大核心模块：")] }),
|
||||||
|
|
||||||
|
// 模块总览表格
|
||||||
|
new Table({
|
||||||
|
width: { size: 9360, type: WidthType.DXA },
|
||||||
|
columnWidths: [2000, 2000, 5360],
|
||||||
|
rows: [
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "模块名称", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
}),
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "核心功能", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
}),
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "功能描述", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun({ text: "设备管理", bold: true, color: colors.primary })] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("台账/巡检/维护")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("对生产设备进行全面管理，包括设备台账、巡检计划、维护保养等")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun({ text: "采购管理", bold: true, color: colors.primary })] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("需求/订单/供应商")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("管理采购全流程，从需求申请到订单执行、供应商管理")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun({ text: "仓储物流", bold: true, color: colors.primary })] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("入库/出库/库存")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("管理物料和成品的出入库流程，实时监控库存状态")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun({ text: "财务管理", bold: true, color: colors.primary })] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("总账/应收应付/报表")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("提供完整的财务核算功能，支持多种财务报表")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun({ text: "人力资源", bold: true, color: colors.primary })] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("组织/员工/薪酬")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("管理企业组织架构、员工档案、考勤薪酬等")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun({ text: "协同办公", bold: true, color: colors.primary })] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("审批/门户/知识")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("提供审批流程、企业门户、知识管理等协同功能")] })] })
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 3. 设备管理系统
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("3. 设备管理系统")] }),
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("3.1 设备台账")] }),
|
||||||
|
new Table({
|
||||||
|
width: { size: 9360, type: WidthType.DXA },
|
||||||
|
columnWidths: [3120, 6240],
|
||||||
|
rows: [
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "功能点", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
}),
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "功能描述", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("设备列表")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("展示所有设备的基本信息，支持筛选、搜索、导出")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("设备分类")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("按类型、状态、位置等维度对设备进行分类管理")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("设备档案")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("记录设备的详细信息，包括技术参数、使用说明、维保记录等")] })] })
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("3.2 巡检管理")] }),
|
||||||
|
new Table({
|
||||||
|
width: { size: 9360, type: WidthType.DXA },
|
||||||
|
columnWidths: [3120, 6240],
|
||||||
|
rows: [
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "功能点", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
}),
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "功能描述", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("巡检计划")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("制定周期性巡检计划，自动生成巡检任务")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("巡检任务")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("执行巡检任务，记录巡检结果和问题")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("巡检记录")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("查询历史巡检记录，支持追溯分析")] })] })
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("3.3 维护保养")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("保养计划：制定设备保养周期和内容")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("保养任务：执行和跟踪保养工作")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("维修记录：记录设备维修历史和费用")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("3.4 统计分析")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("设备完好率统计")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("故障分析报表")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("维保成本分析")] }),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 4. 采购管理系统
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("4. 采购管理系统")] }),
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("4.1 采购需求")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("需求申请：员工提交采购申请，包含物料、数量、用途等")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("需求审批：按流程审批采购申请")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("需求池：汇总待采购的需求，进行批量处理")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("4.2 采购订单")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("订单创建：基于审批通过的需求生成采购订单")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("订单跟踪：实时跟踪订单的执行状态")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("订单结算：与供应商进行货款结算")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("4.3 供应商管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("供应商档案：管理供应商的基本信息和资质")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("供应商评估：定期评估供应商的表现")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("供应商分类：按类型、等级对供应商分组管理")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("4.4 库存查询")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("实时库存：查看当前各物料的库存数量")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("库存预警：设置库存上下限，自动提醒")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("库存流水：查看物料的进出库明细")] }),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 5. 仓储物流系统
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("5. 仓储物流系统")] }),
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("5.1 入库管理")] }),
|
||||||
|
new Table({
|
||||||
|
width: { size: 9360, type: WidthType.DXA },
|
||||||
|
columnWidths: [3120, 6240],
|
||||||
|
rows: [
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "入库类型", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
}),
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "说明", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("采购入库")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("采购订单到货后入库")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("生产入库")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("生产完工的产品入库")] })] })
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("退货入库")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("销售退货或其他原因退货入库")] })] })
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("5.2 出库管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("领料出库：生产部门领用物料")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("销售出库：销售订单发货出库")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("调拨出库：仓库之间调拨")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("5.3 库存管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("库存盘点：定期或不定期进行库存盘点")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("库存调拨：库房间物料调拨")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("库存预警：低库存提醒")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("5.4 报表统计")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("出入库明细报表")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("库存周转率分析")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("ABC分类分析")] }),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 6. 财务管理系统
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("6. 财务管理系统")] }),
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("6.1 总账管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("科目设置：设置会计科目体系")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("凭证管理：录入、审核记账凭证")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("账簿查询：查询总账、明细账")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("6.2 应收应付")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("应收账款：管理客户欠款")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("应付账款：管理供应商欠款")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("收付款管理：记录收款和付款")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("6.3 报表中心")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("资产负债表")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("利润表")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("现金流量表")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("6.4 资产管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("固定资产：管理企业固定资产")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("资产折旧：自动计算资产折旧")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("资产盘点：定期盘点固定资产")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("6.5 出纳管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("银行对账：与银行流水核对")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("现金日记账：记录现金收支")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("资金计划：制定资金使用计划")] }),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 7. 人力资源系统
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("7. 人力资源系统")] }),
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("7.1 组织管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("组织架构：设置公司部门结构")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("岗位管理：设置岗位和职责")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("编制管理：管理各部门编制人数")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("7.2 员工管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("员工档案：管理员工基本信息")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("入职离职：办理入职和离职手续")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("合同管理：管理劳动合同")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("7.3 假期管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("假期类型：设置假期种类")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("假期余额：管理员工假期余额")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("请假审批：处理请假申请")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("7.4 薪酬核算")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("薪资结构：设置薪资组成")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("薪资计算：根据考勤、绩效等计算薪资")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("薪资发放：生成工资条")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("7.5 工作流配置")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("审批流程：配置审批流程")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("表单设计：设计审批表单")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("流程监控：监控流程执行状态")] }),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 8. 协同办公系统
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("8. 协同办公系统")] }),
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("8.1 企业门户")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("门户配置：配置企业门户样式和内容")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("快捷入口：设置常用功能快捷入口")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("消息中心：统一消息通知")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("8.2 知识管理")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("文档中心：集中管理企业文档")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("知识库：建立知识库体系")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("文件共享：团队文件共享")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("8.3 审批中心")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("待办事项：待处理的审批")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("已办事项：已处理完成的审批")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("我发起的：发起过的审批")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("审批设置：配置审批规则")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("8.4 费用报销")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("报销申请：提交费用报销")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("借款管理：管理员工借款")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("费用标准：设置报销标准")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("8.5 通知公告")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("公告发布：发布企业公告")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("公告管理：管理已发布的公告")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("阅读统计：统计公告阅读情况")] }),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 9. 应用主页设计
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("9. 应用主页设计")] }),
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("9.1 工作台设计")] }),
|
||||||
|
new Paragraph({ spacing: { after: 200 }, children: [new TextRun("应用主页（工作台）是用户登录后的第一个页面，需要展示以下内容：")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_3, children: [new TextRun("数据概览")] }),
|
||||||
|
new Table({
|
||||||
|
width: { size: 9360, type: WidthType.DXA },
|
||||||
|
columnWidths: [2340, 2340, 2340, 2340],
|
||||||
|
rows: [
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.primary, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "设备总数", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
}),
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: "11998E", type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "库存物料", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
}),
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: "F5576C", type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "待审批", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
}),
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.secondary, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "本月支出", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_3, children: [new TextRun("快捷入口")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("设备巡检")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("采购申请")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("入库登记")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("请假申请")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("费用报销")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("库存查询")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_3, children: [new TextRun("待办事项")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("审批类：待处理的审批单")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("任务类：待执行的巡检、保养任务")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("提醒类：库存预警、合同到期等")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_3, children: [new TextRun("应用模块")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("六大模块入口图标")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("显示各模块的关键数据")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("支持自定义模块排序")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_3, children: [new TextRun("经营概览")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("数据图表展示")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("支持切换周/月/季视图")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_3, children: [new TextRun("最新公告")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("展示最新发布的公告")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("区分公告类型（重要/普通）")] }),
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
new Paragraph({ children: [new PageBreak()] }),
|
||||||
|
|
||||||
|
// 10. 附录
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("10. 附录")] }),
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("10.1 版本历史")] }),
|
||||||
|
new Table({
|
||||||
|
width: { size: 9360, type: WidthType.DXA },
|
||||||
|
columnWidths: [1500, 2000, 5860],
|
||||||
|
rows: [
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "版本", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
}),
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "日期", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
}),
|
||||||
|
new TableCell({
|
||||||
|
borders: headerBorders,
|
||||||
|
shading: { fill: colors.headerBg, type: ShadingType.CLEAR },
|
||||||
|
margins: cellMargins,
|
||||||
|
children: [new Paragraph({ children: [new TextRun({ text: "说明", bold: true, color: "FFFFFF" })], alignment: AlignmentType.CENTER })]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new TableRow({
|
||||||
|
children: [
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("V1.0")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("2026-04-08")] })] }),
|
||||||
|
new TableCell({ borders, margins: cellMargins, children: [new Paragraph({ children: [new TextRun("初始版本")] })] })
|
||||||
|
]
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("10.2 参考资料")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "numbers", level: 0 }, children: [new TextRun("《企业资源规划（ERP）系统设计规范》")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "numbers", level: 0 }, children: [new TextRun("《天天系统技术架构文档》")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "numbers", level: 0 }, children: [new TextRun("《UI/UX设计规范》")] }),
|
||||||
|
|
||||||
|
new Paragraph({ heading: HeadingLevel.HEADING_2, children: [new TextRun("10.3 联系方式")] }),
|
||||||
|
new Paragraph({ spacing: { after: 100 }, children: [new TextRun("如有疑问，请联系系统开发团队：")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("邮箱：support@tiantian.com")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("电话：400-888-8888")] }),
|
||||||
|
new Paragraph({ numbering: { reference: "bullets", level: 0 }, children: [new TextRun("地址：XX市XX区XX路XX号")] }),
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// 生成文件
|
||||||
|
Packer.toBuffer(doc).then(buffer => {
|
||||||
|
fs.writeFileSync('/Users/gxwebsoft/VUE/tiantian-system/docs/规划文档/天天系统功能需求规划.docx', buffer);
|
||||||
|
console.log('文档生成成功！');
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('生成失败：', err);
|
||||||
|
});
|
||||||
5
docs/规划文档/package.json
Normal file
5
docs/规划文档/package.json
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"docx": "^9.6.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
163
docs/规划文档/pnpm-lock.yaml
generated
Normal file
163
docs/规划文档/pnpm-lock.yaml
generated
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
lockfileVersion: '9.0'
|
||||||
|
|
||||||
|
settings:
|
||||||
|
autoInstallPeers: true
|
||||||
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
|
importers:
|
||||||
|
|
||||||
|
.:
|
||||||
|
dependencies:
|
||||||
|
docx:
|
||||||
|
specifier: ^9.6.1
|
||||||
|
version: 9.6.1
|
||||||
|
|
||||||
|
packages:
|
||||||
|
|
||||||
|
'@types/node@25.5.2':
|
||||||
|
resolution: {integrity: sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg==}
|
||||||
|
|
||||||
|
core-util-is@1.0.3:
|
||||||
|
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
|
||||||
|
|
||||||
|
docx@9.6.1:
|
||||||
|
resolution: {integrity: sha512-ZJja9/KBUuFC109sCMzovoq2GR2wCG/AuxivjA+OHj/q0TEgJIm3S7yrlUxIy3B+bV8YDj/BiHfWyrRFmyWpDQ==}
|
||||||
|
engines: {node: '>=10'}
|
||||||
|
|
||||||
|
hash.js@1.1.7:
|
||||||
|
resolution: {integrity: sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==}
|
||||||
|
|
||||||
|
immediate@3.0.6:
|
||||||
|
resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
|
||||||
|
|
||||||
|
inherits@2.0.4:
|
||||||
|
resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
|
||||||
|
|
||||||
|
isarray@1.0.0:
|
||||||
|
resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
|
||||||
|
|
||||||
|
jszip@3.10.1:
|
||||||
|
resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
|
||||||
|
|
||||||
|
lie@3.3.0:
|
||||||
|
resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
|
||||||
|
|
||||||
|
minimalistic-assert@1.0.1:
|
||||||
|
resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
|
||||||
|
|
||||||
|
nanoid@5.1.7:
|
||||||
|
resolution: {integrity: sha512-ua3NDgISf6jdwezAheMOk4mbE1LXjm1DfMUDMuJf4AqxLFK3ccGpgWizwa5YV7Yz9EpXwEaWoRXSb/BnV0t5dQ==}
|
||||||
|
engines: {node: ^18 || >=20}
|
||||||
|
hasBin: true
|
||||||
|
|
||||||
|
pako@1.0.11:
|
||||||
|
resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
|
||||||
|
|
||||||
|
process-nextick-args@2.0.1:
|
||||||
|
resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
|
||||||
|
|
||||||
|
readable-stream@2.3.8:
|
||||||
|
resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
|
||||||
|
|
||||||
|
safe-buffer@5.1.2:
|
||||||
|
resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
|
||||||
|
|
||||||
|
sax@1.6.0:
|
||||||
|
resolution: {integrity: sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==}
|
||||||
|
engines: {node: '>=11.0.0'}
|
||||||
|
|
||||||
|
setimmediate@1.0.5:
|
||||||
|
resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
|
||||||
|
|
||||||
|
string_decoder@1.1.1:
|
||||||
|
resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
|
||||||
|
|
||||||
|
undici-types@7.18.2:
|
||||||
|
resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
|
||||||
|
|
||||||
|
util-deprecate@1.0.2:
|
||||||
|
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
|
||||||
|
|
||||||
|
xml-js@1.6.11:
|
||||||
|
resolution: {integrity: sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==}
|
||||||
|
hasBin: true
|
||||||
|
|
||||||
|
xml@1.0.1:
|
||||||
|
resolution: {integrity: sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==}
|
||||||
|
|
||||||
|
snapshots:
|
||||||
|
|
||||||
|
'@types/node@25.5.2':
|
||||||
|
dependencies:
|
||||||
|
undici-types: 7.18.2
|
||||||
|
|
||||||
|
core-util-is@1.0.3: {}
|
||||||
|
|
||||||
|
docx@9.6.1:
|
||||||
|
dependencies:
|
||||||
|
'@types/node': 25.5.2
|
||||||
|
hash.js: 1.1.7
|
||||||
|
jszip: 3.10.1
|
||||||
|
nanoid: 5.1.7
|
||||||
|
xml: 1.0.1
|
||||||
|
xml-js: 1.6.11
|
||||||
|
|
||||||
|
hash.js@1.1.7:
|
||||||
|
dependencies:
|
||||||
|
inherits: 2.0.4
|
||||||
|
minimalistic-assert: 1.0.1
|
||||||
|
|
||||||
|
immediate@3.0.6: {}
|
||||||
|
|
||||||
|
inherits@2.0.4: {}
|
||||||
|
|
||||||
|
isarray@1.0.0: {}
|
||||||
|
|
||||||
|
jszip@3.10.1:
|
||||||
|
dependencies:
|
||||||
|
lie: 3.3.0
|
||||||
|
pako: 1.0.11
|
||||||
|
readable-stream: 2.3.8
|
||||||
|
setimmediate: 1.0.5
|
||||||
|
|
||||||
|
lie@3.3.0:
|
||||||
|
dependencies:
|
||||||
|
immediate: 3.0.6
|
||||||
|
|
||||||
|
minimalistic-assert@1.0.1: {}
|
||||||
|
|
||||||
|
nanoid@5.1.7: {}
|
||||||
|
|
||||||
|
pako@1.0.11: {}
|
||||||
|
|
||||||
|
process-nextick-args@2.0.1: {}
|
||||||
|
|
||||||
|
readable-stream@2.3.8:
|
||||||
|
dependencies:
|
||||||
|
core-util-is: 1.0.3
|
||||||
|
inherits: 2.0.4
|
||||||
|
isarray: 1.0.0
|
||||||
|
process-nextick-args: 2.0.1
|
||||||
|
safe-buffer: 5.1.2
|
||||||
|
string_decoder: 1.1.1
|
||||||
|
util-deprecate: 1.0.2
|
||||||
|
|
||||||
|
safe-buffer@5.1.2: {}
|
||||||
|
|
||||||
|
sax@1.6.0: {}
|
||||||
|
|
||||||
|
setimmediate@1.0.5: {}
|
||||||
|
|
||||||
|
string_decoder@1.1.1:
|
||||||
|
dependencies:
|
||||||
|
safe-buffer: 5.1.2
|
||||||
|
|
||||||
|
undici-types@7.18.2: {}
|
||||||
|
|
||||||
|
util-deprecate@1.0.2: {}
|
||||||
|
|
||||||
|
xml-js@1.6.11:
|
||||||
|
dependencies:
|
||||||
|
sax: 1.6.0
|
||||||
|
|
||||||
|
xml@1.0.1: {}
|
||||||
461
docs/规划文档/功能菜单脑图.html
Normal file
461
docs/规划文档/功能菜单脑图.html
Normal file
@@ -0,0 +1,461 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>天天系统 - 功能菜单脑图</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.14.4/dist/browser/index.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/markmap-view@0.14.4/dist/browser/index.min.js"></script>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', sans-serif;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 1800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.header h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.header p {
|
||||||
|
opacity: 0.9;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
#mindmap {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 800px;
|
||||||
|
}
|
||||||
|
#mindmap svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 800px;
|
||||||
|
}
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.toolbar button {
|
||||||
|
padding: 12px 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.toolbar button.primary {
|
||||||
|
background: white;
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
.toolbar button.secondary {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.toolbar button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 30px;
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.legend-dot {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<h1>🗺️ 天天系统功能菜单脑图</h1>
|
||||||
|
<p>6大核心模块 · 完整功能架构</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<button class="primary" onclick="zoomIn()">🔍 放大</button>
|
||||||
|
<button class="primary" onclick="zoomOut()">🔍 缩小</button>
|
||||||
|
<button class="secondary" onclick="resetZoom()">↺ 重置</button>
|
||||||
|
<button class="secondary" onclick="downloadImage()">📥 下载PNG</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="mindmap"></div>
|
||||||
|
|
||||||
|
<div class="legend">
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-dot" style="background: #667eea;"></div>
|
||||||
|
<span>一级菜单</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-dot" style="background: #764ba2;"></div>
|
||||||
|
<span>二级菜单</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-dot" style="background: #f093fb;"></div>
|
||||||
|
<span>三级功能</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const { Markmap, loadCSS, loadJS } = markmap;
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
content: "天天系统 ERP",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
content: "1️⃣ 设备管理",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
content: "📊 设备台账",
|
||||||
|
children: [
|
||||||
|
"设备列表",
|
||||||
|
"设备分类",
|
||||||
|
"设备档案"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "🔍 巡检管理",
|
||||||
|
children: [
|
||||||
|
"巡检计划",
|
||||||
|
"巡检任务",
|
||||||
|
"巡检记录"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "🔧 维护保养",
|
||||||
|
children: [
|
||||||
|
"保养计划",
|
||||||
|
"保养任务",
|
||||||
|
"维修记录"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📈 统计分析",
|
||||||
|
children: [
|
||||||
|
"设备完好率",
|
||||||
|
"故障分析",
|
||||||
|
"维保成本"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "2️⃣ 采购管理",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
content: "📝 采购需求",
|
||||||
|
children: [
|
||||||
|
"需求申请",
|
||||||
|
"需求审批",
|
||||||
|
"需求池"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📋 采购订单",
|
||||||
|
children: [
|
||||||
|
"订单创建",
|
||||||
|
"订单跟踪",
|
||||||
|
"订单结算"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "🏭 供应商管理",
|
||||||
|
children: [
|
||||||
|
"供应商档案",
|
||||||
|
"供应商评估",
|
||||||
|
"供应商分类"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📦 库存查询",
|
||||||
|
children: [
|
||||||
|
"实时库存",
|
||||||
|
"库存预警",
|
||||||
|
"库存流水"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "3️⃣ 仓储物流",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
content: "📥 入库管理",
|
||||||
|
children: [
|
||||||
|
"采购入库",
|
||||||
|
"生产入库",
|
||||||
|
"退货入库"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📤 出库管理",
|
||||||
|
children: [
|
||||||
|
"领料出库",
|
||||||
|
"销售出库",
|
||||||
|
"调拨出库"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📦 库存管理",
|
||||||
|
children: [
|
||||||
|
"库存盘点",
|
||||||
|
"库存调拨",
|
||||||
|
"库存预警"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📊 报表统计",
|
||||||
|
children: [
|
||||||
|
"出入库明细",
|
||||||
|
"库存周转",
|
||||||
|
"ABC分析"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "4️⃣ 财务管理",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
content: "📒 总账管理",
|
||||||
|
children: [
|
||||||
|
"科目设置",
|
||||||
|
"凭证管理",
|
||||||
|
"账簿查询"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "💵 应收应付",
|
||||||
|
children: [
|
||||||
|
"应收账款",
|
||||||
|
"应付账款",
|
||||||
|
"收付款管理"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📊 报表中心",
|
||||||
|
children: [
|
||||||
|
"资产负债表",
|
||||||
|
"利润表",
|
||||||
|
"现金流量表"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "💼 资产管理",
|
||||||
|
children: [
|
||||||
|
"固定资产",
|
||||||
|
"资产折旧",
|
||||||
|
"资产盘点"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "💳 出纳管理",
|
||||||
|
children: [
|
||||||
|
"银行对账",
|
||||||
|
"现金日记账",
|
||||||
|
"资金计划"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "5️⃣ 人力资源",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
content: "🏢 组织管理",
|
||||||
|
children: [
|
||||||
|
"组织架构",
|
||||||
|
"岗位管理",
|
||||||
|
"编制管理"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "👤 员工管理",
|
||||||
|
children: [
|
||||||
|
"员工档案",
|
||||||
|
"入职离职",
|
||||||
|
"合同管理"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📅 假期管理",
|
||||||
|
children: [
|
||||||
|
"假期类型",
|
||||||
|
"假期余额",
|
||||||
|
"请假审批"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "💰 薪酬核算",
|
||||||
|
children: [
|
||||||
|
"薪资结构",
|
||||||
|
"薪资计算",
|
||||||
|
"薪资发放"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "⚙️ 工作流配置",
|
||||||
|
children: [
|
||||||
|
"审批流程",
|
||||||
|
"表单设计",
|
||||||
|
"流程监控"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "6️⃣ 协同办公",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
content: "🏠 企业门户",
|
||||||
|
children: [
|
||||||
|
"门户配置",
|
||||||
|
"快捷入口",
|
||||||
|
"消息中心"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📚 知识管理",
|
||||||
|
children: [
|
||||||
|
"文档中心",
|
||||||
|
"知识库",
|
||||||
|
"文件共享"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📝 审批中心",
|
||||||
|
children: [
|
||||||
|
"待办事项",
|
||||||
|
"已办事项",
|
||||||
|
"我发起的"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "💸 费用报销",
|
||||||
|
children: [
|
||||||
|
"报销申请",
|
||||||
|
"借款管理",
|
||||||
|
"费用标准"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
content: "📢 通知公告",
|
||||||
|
children: [
|
||||||
|
"公告发布",
|
||||||
|
"公告管理",
|
||||||
|
"阅读统计"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
let markmap = null;
|
||||||
|
let svgElement = null;
|
||||||
|
let scale = 1;
|
||||||
|
|
||||||
|
function initMindmap() {
|
||||||
|
markmap = Markmap.create('#mindmap', {
|
||||||
|
preset: 'colorful',
|
||||||
|
color: (node) => {
|
||||||
|
if (node.depth === 0) return '#667eea';
|
||||||
|
if (node.depth === 1) return '#764ba2';
|
||||||
|
if (node.depth === 2) return '#f093fb';
|
||||||
|
return '#4fd1c5';
|
||||||
|
},
|
||||||
|
initialExpandLevel: 2,
|
||||||
|
nodeHeight: 28,
|
||||||
|
paddingX: 16,
|
||||||
|
paddingY: 8,
|
||||||
|
duration: 500
|
||||||
|
}, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function zoomIn() {
|
||||||
|
scale += 0.2;
|
||||||
|
applyZoom();
|
||||||
|
}
|
||||||
|
|
||||||
|
function zoomOut() {
|
||||||
|
scale -= 0.2;
|
||||||
|
applyZoom();
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetZoom() {
|
||||||
|
scale = 1;
|
||||||
|
applyZoom();
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyZoom() {
|
||||||
|
const svg = document.querySelector('#mindmap svg');
|
||||||
|
if (svg) {
|
||||||
|
svg.style.transform = `scale(${scale})`;
|
||||||
|
svg.style.transformOrigin = 'center center';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function downloadImage() {
|
||||||
|
const svg = document.querySelector('#mindmap svg');
|
||||||
|
if (!svg) return;
|
||||||
|
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const svgData = new XMLSerializer().serializeToString(svg);
|
||||||
|
const img = new Image();
|
||||||
|
|
||||||
|
canvas.width = 2400;
|
||||||
|
canvas.height = 1600;
|
||||||
|
|
||||||
|
img.onload = function() {
|
||||||
|
ctx.fillStyle = 'white';
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.download = '天天系统功能菜单脑图.png';
|
||||||
|
link.href = canvas.toDataURL('image/png');
|
||||||
|
link.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
|
||||||
|
}
|
||||||
|
|
||||||
|
initMindmap();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
122
docs/规划文档/功能菜单规划.md
Normal file
122
docs/规划文档/功能菜单规划.md
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
# 天天系统 - 功能菜单规划
|
||||||
|
|
||||||
|
## 1. 设备管理
|
||||||
|
### 1.1 设备台账
|
||||||
|
- 设备列表
|
||||||
|
- 设备分类
|
||||||
|
- 设备档案
|
||||||
|
### 1.2 巡检管理
|
||||||
|
- 巡检计划
|
||||||
|
- 巡检任务
|
||||||
|
- 巡检记录
|
||||||
|
### 1.3 维护保养
|
||||||
|
- 保养计划
|
||||||
|
- 保养任务
|
||||||
|
- 维修记录
|
||||||
|
### 1.4 统计分析
|
||||||
|
- 设备完好率
|
||||||
|
- 故障分析
|
||||||
|
- 维保成本
|
||||||
|
|
||||||
|
## 2. 采购管理
|
||||||
|
### 2.1 采购需求
|
||||||
|
- 需求申请
|
||||||
|
- 需求审批
|
||||||
|
- 需求池
|
||||||
|
### 2.2 采购订单
|
||||||
|
- 订单创建
|
||||||
|
- 订单跟踪
|
||||||
|
- 订单结算
|
||||||
|
### 2.3 供应商管理
|
||||||
|
- 供应商档案
|
||||||
|
- 供应商评估
|
||||||
|
- 供应商分类
|
||||||
|
### 2.4 库存查询
|
||||||
|
- 实时库存
|
||||||
|
- 库存预警
|
||||||
|
- 库存流水
|
||||||
|
|
||||||
|
## 3. 仓储物流
|
||||||
|
### 3.1 入库管理
|
||||||
|
- 采购入库
|
||||||
|
- 生产入库
|
||||||
|
- 退货入库
|
||||||
|
### 3.2 出库管理
|
||||||
|
- 领料出库
|
||||||
|
- 销售出库
|
||||||
|
- 调拨出库
|
||||||
|
### 3.3 库存管理
|
||||||
|
- 库存盘点
|
||||||
|
- 库存调拨
|
||||||
|
- 库存预警
|
||||||
|
### 3.4 报表统计
|
||||||
|
- 出入库明细
|
||||||
|
- 库存周转
|
||||||
|
- ABC分析
|
||||||
|
|
||||||
|
## 4. 财务管理
|
||||||
|
### 4.1 总账管理
|
||||||
|
- 科目设置
|
||||||
|
- 凭证管理
|
||||||
|
- 账簿查询
|
||||||
|
### 4.2 应收应付
|
||||||
|
- 应收账款
|
||||||
|
- 应付账款
|
||||||
|
- 收付款管理
|
||||||
|
### 4.3 报表中心
|
||||||
|
- 资产负债表
|
||||||
|
- 利润表
|
||||||
|
- 现金流量表
|
||||||
|
### 4.4 资产管理
|
||||||
|
- 固定资产
|
||||||
|
- 资产折旧
|
||||||
|
- 资产盘点
|
||||||
|
### 4.5 出纳管理
|
||||||
|
- 银行对账
|
||||||
|
- 现金日记账
|
||||||
|
- 资金计划
|
||||||
|
|
||||||
|
## 5. 人力资源
|
||||||
|
### 5.1 组织管理
|
||||||
|
- 组织架构
|
||||||
|
- 岗位管理
|
||||||
|
- 编制管理
|
||||||
|
### 5.2 员工管理
|
||||||
|
- 员工档案
|
||||||
|
- 入职离职
|
||||||
|
- 合同管理
|
||||||
|
### 5.3 假期管理
|
||||||
|
- 假期类型
|
||||||
|
- 假期余额
|
||||||
|
- 请假审批
|
||||||
|
### 5.4 薪酬核算
|
||||||
|
- 薪资结构
|
||||||
|
- 薪资计算
|
||||||
|
- 薪资发放
|
||||||
|
### 5.5 工作流配置
|
||||||
|
- 审批流程
|
||||||
|
- 表单设计
|
||||||
|
- 流程监控
|
||||||
|
|
||||||
|
## 6. 协同办公
|
||||||
|
### 6.1 企业门户
|
||||||
|
- 门户配置
|
||||||
|
- 快捷入口
|
||||||
|
- 消息中心
|
||||||
|
### 6.2 知识管理
|
||||||
|
- 文档中心
|
||||||
|
- 知识库
|
||||||
|
- 文件共享
|
||||||
|
### 6.3 审批中心
|
||||||
|
- 待办事项
|
||||||
|
- 已办事项
|
||||||
|
- 我发起的
|
||||||
|
- 审批设置
|
||||||
|
### 6.4 费用报销
|
||||||
|
- 报销申请
|
||||||
|
- 借款管理
|
||||||
|
- 费用标准
|
||||||
|
### 6.5 通知公告
|
||||||
|
- 公告发布
|
||||||
|
- 公告管理
|
||||||
|
- 阅读统计
|
||||||
BIN
docs/规划文档/天天系统功能需求规划.docx
Normal file
BIN
docs/规划文档/天天系统功能需求规划.docx
Normal file
Binary file not shown.
536
应用主页工作台.html
Normal file
536
应用主页工作台.html
Normal file
@@ -0,0 +1,536 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>天天系统 - 应用主页工作台</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass {
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card:hover .app-icon {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-icon {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card.blue::before { background: linear-gradient(90deg, #667eea, #764ba2); }
|
||||||
|
.stat-card.green::before { background: linear-gradient(90deg, #11998e, #38ef7d); }
|
||||||
|
.stat-card.orange::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
|
||||||
|
.stat-card.purple::before { background: linear-gradient(90deg, #a8edea, #fed6e3); }
|
||||||
|
|
||||||
|
.quick-btn {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-btn:hover {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-item {
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-item:hover {
|
||||||
|
background: rgba(102, 126, 234, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item:hover, .sidebar-item.active {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-badge {
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.7; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-hide::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="scrollbar-hide">
|
||||||
|
<div class="flex min-h-screen">
|
||||||
|
<!-- 左侧导航 -->
|
||||||
|
<aside class="sidebar w-64 fixed h-full text-white flex flex-col">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="p-6 border-b border-white/10">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
|
||||||
|
<i class="fas fa-cube text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-bold text-lg">天天系统</h1>
|
||||||
|
<p class="text-xs text-white/70">ERP 管理平台</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 导航菜单 -->
|
||||||
|
<nav class="flex-1 py-6 px-3">
|
||||||
|
<div class="space-y-1">
|
||||||
|
<a href="#" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||||
|
<i class="fas fa-home w-5"></i>
|
||||||
|
<span>工作台</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||||
|
<i class="fas fa-cogs w-5"></i>
|
||||||
|
<span>设备管理</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||||
|
<i class="fas fa-shopping-cart w-5"></i>
|
||||||
|
<span>采购管理</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||||
|
<i class="fas fa-warehouse w-5"></i>
|
||||||
|
<span>仓储物流</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||||
|
<i class="fas fa-wallet w-5"></i>
|
||||||
|
<span>财务管理</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||||
|
<i class="fas fa-users w-5"></i>
|
||||||
|
<span>人力资源</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||||
|
<i class="fas fa-tasks w-5"></i>
|
||||||
|
<span>协同办公</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8 pt-6 border-t border-white/10">
|
||||||
|
<p class="px-4 text-xs text-white/50 mb-3">个人</p>
|
||||||
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||||
|
<i class="fas fa-user w-5"></i>
|
||||||
|
<span>个人信息</span>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||||||
|
<i class="fas fa-cog w-5"></i>
|
||||||
|
<span>系统设置</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 用户信息 -->
|
||||||
|
<div class="p-4 border-t border-white/10">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
|
||||||
|
<i class="fas fa-user"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-medium">管理员</p>
|
||||||
|
<p class="text-xs text-white/70">超级管理员</p>
|
||||||
|
</div>
|
||||||
|
<button class="text-white/70 hover:text-white">
|
||||||
|
<i class="fas fa-sign-out-alt"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<main class="flex-1 ml-64">
|
||||||
|
<!-- 顶部栏 -->
|
||||||
|
<header class="glass sticky top-0 z-50 px-8 py-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<div class="relative w-96">
|
||||||
|
<input type="text" placeholder="🔍 搜索设备、订单、员工、文档..."
|
||||||
|
class="w-full px-5 py-3 bg-gray-100 rounded-xl border-0 focus:ring-2 focus:ring-purple-500 focus:bg-white transition-all">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧 -->
|
||||||
|
<div class="flex items-center gap-6">
|
||||||
|
<!-- 全屏 -->
|
||||||
|
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||||
|
<i class="fas fa-expand text-lg"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 消息 -->
|
||||||
|
<button class="relative text-gray-500 hover:text-purple-600 transition-colors">
|
||||||
|
<i class="fas fa-bell text-lg"></i>
|
||||||
|
<span class="notification-badge absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">3</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 语言 -->
|
||||||
|
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||||||
|
<i class="fas fa-globe text-lg"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 用户 -->
|
||||||
|
<div class="flex items-center gap-3 pl-6 border-l border-gray-200">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-gray-800">Admin</p>
|
||||||
|
<p class="text-xs text-gray-500">超级管理员</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- 内容区域 -->
|
||||||
|
<div class="p-8">
|
||||||
|
<!-- 欢迎区 -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">
|
||||||
|
👋 早上好，管理员！
|
||||||
|
</h2>
|
||||||
|
<p class="text-gray-500">今天是 2026年4月8日 星期三，本周还有 <span class="text-purple-600 font-semibold">3</span> 天工作日</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 数据概览 -->
|
||||||
|
<div class="grid grid-cols-4 gap-6 mb-8">
|
||||||
|
<div class="stat-card blue glass rounded-2xl p-6 card-hover">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||||
|
<i class="fas fa-cogs text-blue-600 text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 12%</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">128</h3>
|
||||||
|
<p class="text-gray-500 text-sm">设备总数</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card green glass rounded-2xl p-6 card-hover">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||||||
|
<i class="fas fa-boxes text-green-600 text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 8%</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">5,230</h3>
|
||||||
|
<p class="text-gray-500 text-sm">库存物料</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card orange glass rounded-2xl p-6 card-hover">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||||||
|
<i class="fas fa-clock text-orange-600 text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 5</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">12</h3>
|
||||||
|
<p class="text-gray-500 text-sm">待审批</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card purple glass rounded-2xl p-6 card-hover">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||||
|
<i class="fas fa-chart-line text-purple-600 text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 15%</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-3xl font-bold text-gray-800 mb-1">¥89.5<span class="text-lg">万</span></h3>
|
||||||
|
<p class="text-gray-500 text-sm">本月支出</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 中间区域 -->
|
||||||
|
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||||
|
<!-- 快捷入口 -->
|
||||||
|
<div class="glass rounded-2xl p-6 card-hover">
|
||||||
|
<h3 class="font-bold text-lg text-gray-800 mb-4 flex items-center gap-2">
|
||||||
|
<i class="fas fa-bolt text-yellow-500"></i>
|
||||||
|
快捷入口
|
||||||
|
</h3>
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||||
|
<i class="fas fa-search text-purple-500"></i>
|
||||||
|
设备巡检
|
||||||
|
</button>
|
||||||
|
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||||
|
<i class="fas fa-shopping-bag text-blue-500"></i>
|
||||||
|
采购申请
|
||||||
|
</button>
|
||||||
|
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||||
|
<i class="fas fa-dolly text-green-500"></i>
|
||||||
|
入库登记
|
||||||
|
</button>
|
||||||
|
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||||
|
<i class="fas fa-calendar-alt text-orange-500"></i>
|
||||||
|
请假申请
|
||||||
|
</button>
|
||||||
|
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||||
|
<i class="fas fa-file-invoice-dollar text-red-500"></i>
|
||||||
|
费用报销
|
||||||
|
</button>
|
||||||
|
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium">
|
||||||
|
<i class="fas fa-box text-indigo-500"></i>
|
||||||
|
库存查询
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 待办事项 -->
|
||||||
|
<div class="glass rounded-2xl p-6 card-hover col-span-2">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||||
|
<i class="fas fa-list-check text-red-500"></i>
|
||||||
|
待办事项
|
||||||
|
<span class="bg-red-100 text-red-600 px-2 py-0.5 rounded-full text-xs font-medium">5</span>
|
||||||
|
</h3>
|
||||||
|
<button class="text-purple-600 text-sm font-medium hover:underline">查看全部</button>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="todo-item flex items-center gap-4 p-3 rounded-xl cursor-pointer">
|
||||||
|
<div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<i class="fas fa-clipboard-check text-red-600"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-medium text-gray-800">审批 - 张三的报销单</p>
|
||||||
|
<p class="text-xs text-gray-500">差旅费 ¥2,580.00</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-red-500 font-medium">2小时前</span>
|
||||||
|
</div>
|
||||||
|
<div class="todo-item flex items-center gap-4 p-3 rounded-xl cursor-pointer">
|
||||||
|
<div class="w-10 h-10 bg-yellow-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<i class="fas fa-search text-yellow-600"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-medium text-gray-800">巡检 - 3号车间设备待检</p>
|
||||||
|
<p class="text-xs text-gray-500">包含12台设备</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-yellow-600 font-medium">4小时前</span>
|
||||||
|
</div>
|
||||||
|
<div class="todo-item flex items-center gap-4 p-3 rounded-xl cursor-pointer">
|
||||||
|
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<i class="fas fa-shopping-cart text-blue-600"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-medium text-gray-800">采购 - 办公用品采购单</p>
|
||||||
|
<p class="text-xs text-gray-500">待审批</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-blue-600 font-medium">1天前</span>
|
||||||
|
</div>
|
||||||
|
<div class="todo-item flex items-center gap-4 p-3 rounded-xl cursor-pointer">
|
||||||
|
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||||
|
<i class="fas fa-wrench text-green-600"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="font-medium text-gray-800">保养 - 空压机定期保养</p>
|
||||||
|
<p class="text-xs text-gray-500">例行保养</p>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-green-600 font-medium">2天前</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 应用模块 -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h3 class="font-bold text-xl text-gray-800">
|
||||||
|
<i class="fas fa-th-large text-purple-500 mr-2"></i>
|
||||||
|
应用模块
|
||||||
|
</h3>
|
||||||
|
<button class="text-purple-600 text-sm font-medium hover:underline">自定义模块</button>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-6 gap-4">
|
||||||
|
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||||
|
<div class="app-icon w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||||
|
<i class="fas fa-cogs text-white text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold text-gray-800 mb-1">设备管理</h4>
|
||||||
|
<p class="text-xs text-gray-500">128 设备</p>
|
||||||
|
</div>
|
||||||
|
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||||
|
<div class="app-icon w-16 h-16 bg-gradient-to-br from-green-500 to-teal-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||||
|
<i class="fas fa-shopping-cart text-white text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold text-gray-800 mb-1">采购管理</h4>
|
||||||
|
<p class="text-xs text-gray-500">23 订单</p>
|
||||||
|
</div>
|
||||||
|
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||||
|
<div class="app-icon w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||||
|
<i class="fas fa-warehouse text-white text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold text-gray-800 mb-1">仓储物流</h4>
|
||||||
|
<p class="text-xs text-gray-500">5,230 物料</p>
|
||||||
|
</div>
|
||||||
|
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||||
|
<div class="app-icon w-16 h-16 bg-gradient-to-br from-pink-500 to-rose-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||||
|
<i class="fas fa-wallet text-white text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold text-gray-800 mb-1">财务管理</h4>
|
||||||
|
<p class="text-xs text-gray-500">¥89.5万</p>
|
||||||
|
</div>
|
||||||
|
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||||
|
<div class="app-icon w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||||
|
<i class="fas fa-users text-white text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold text-gray-800 mb-1">人力资源</h4>
|
||||||
|
<p class="text-xs text-gray-500">56 员工</p>
|
||||||
|
</div>
|
||||||
|
<div class="app-card glass rounded-2xl p-6 flex flex-col items-center justify-center card-hover cursor-pointer">
|
||||||
|
<div class="app-icon w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-2xl flex items-center justify-center mb-4 shadow-lg">
|
||||||
|
<i class="fas fa-tasks text-white text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold text-gray-800 mb-1">协同办公</h4>
|
||||||
|
<p class="text-xs text-gray-500">8 流程</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部区域 -->
|
||||||
|
<div class="grid grid-cols-2 gap-6">
|
||||||
|
<!-- 经营概览图表 -->
|
||||||
|
<div class="glass rounded-2xl p-6 card-hover">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||||
|
<i class="fas fa-chart-bar text-blue-500"></i>
|
||||||
|
经营概览
|
||||||
|
</h3>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-3 py-1 text-xs bg-purple-100 text-purple-600 rounded-lg font-medium">本周</button>
|
||||||
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg font-medium">本月</button>
|
||||||
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-lg font-medium">本季</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-48 flex items-end gap-4">
|
||||||
|
<div class="flex-1 flex flex-col items-center">
|
||||||
|
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80" style="height: 60%"></div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">周一</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center">
|
||||||
|
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80" style="height: 75%"></div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">周二</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center">
|
||||||
|
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80" style="height: 45%"></div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">周三</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center">
|
||||||
|
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80" style="height: 90%"></div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">周四</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center">
|
||||||
|
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80" style="height: 85%"></div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">周五</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center">
|
||||||
|
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80 opacity-50" style="height: 40%"></div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">周六</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex flex-col items-center">
|
||||||
|
<div class="w-full bg-gradient-to-t from-purple-500 to-purple-300 rounded-t-lg transition-all hover:opacity-80 opacity-50" style="height: 30%"></div>
|
||||||
|
<span class="text-xs text-gray-500 mt-2">周日</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最新公告 -->
|
||||||
|
<div class="glass rounded-2xl p-6 card-hover">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||||||
|
<i class="fas fa-bullhorn text-red-500"></i>
|
||||||
|
最新公告
|
||||||
|
</h3>
|
||||||
|
<button class="text-purple-600 text-sm font-medium hover:underline">全部公告</button>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="p-4 bg-red-50 rounded-xl border-l-4 border-red-500 cursor-pointer hover:bg-red-100 transition-colors">
|
||||||
|
<h4 class="font-medium text-gray-800 mb-1">关于清明节放假安排的通知</h4>
|
||||||
|
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||||||
|
<span><i class="fas fa-user mr-1"></i>人事行政部</span>
|
||||||
|
<span><i class="fas fa-clock mr-1"></i>2026-04-01</span>
|
||||||
|
<span><i class="fas fa-eye mr-1"></i>1,258 阅读</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bg-blue-50 rounded-xl border-l-4 border-blue-500 cursor-pointer hover:bg-blue-100 transition-colors">
|
||||||
|
<h4 class="font-medium text-gray-800 mb-1">2026年第一季度财报公告</h4>
|
||||||
|
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||||||
|
<span><i class="fas fa-user mr-1"></i>财务部</span>
|
||||||
|
<span><i class="fas fa-clock mr-1"></i>2026-03-28</span>
|
||||||
|
<span><i class="fas fa-eye mr-1"></i>986 阅读</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bg-green-50 rounded-xl border-l-4 border-green-500 cursor-pointer hover:bg-green-100 transition-colors">
|
||||||
|
<h4 class="font-medium text-gray-800 mb-1">新版本系统功能更新说明</h4>
|
||||||
|
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||||||
|
<span><i class="fas fa-user mr-1"></i>技术部</span>
|
||||||
|
<span><i class="fas fa-clock mr-1"></i>2026-03-25</span>
|
||||||
|
<span><i class="fas fa-eye mr-1"></i>756 阅读</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user