From 982c97ab82f3beb1b4febcf014562eda34b9fc05 Mon Sep 17 00:00:00 2001
From: liu <2021943741@qq.com>
Date: 星期二, 29 九月 2026 17:59:41 +0800
Subject: [PATCH] feat(ui): 江苏商贸品牌视觉与首页/登录页改版
---
src/views/dashboard/analytics/modules/quick-actions.vue | 129 +++-
.env | 2
public/static/imgs/jssm-campus.svg | 226 +++++++
company.config.ts | 6
public/logos/JSSM.svg | 38 +
src/packages/effects/layouts/src/authentication/authentication.vue | 134 +++-
.env.development | 8
/dev/null | 78 --
src/views/dashboard/analytics/modules/recent-applications.vue | 272 ++++++++
src/views/dashboard/analytics/modules/kpi-cards.vue | 359 ++++++----
src/packages/locales/src/langs/zh-CN/authentication.json | 10
src/packages/locales/src/langs/en-US/authentication.json | 10
src/views/_core/authentication/login.vue | 265 +++++++
src/views/dashboard/analytics/index.vue | 159 ++--
src/views/dashboard/analytics/modules/todo-panel.vue | 208 ++++++
15 files changed, 1,483 insertions(+), 421 deletions(-)
diff --git a/.env b/.env
index bba56ab..3c00879 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
# 搴旂敤鏍囬
-VITE_APP_TITLE=宸ヤ笟AI鏅洪�犲钩鍙�
+VITE_APP_TITLE=姹熻嫃鍟嗚锤
# 搴旂敤鍛藉悕绌洪棿锛岀敤浜庣紦瀛樸�乻tore绛夊姛鑳界殑鍓嶇紑锛岀‘淇濋殧绂�
VITE_APP_NAMESPACE=yudao-vben-antd
diff --git a/.env.development b/.env.development
index 5ade162..d918988 100644
--- a/.env.development
+++ b/.env.development
@@ -1,6 +1,12 @@
# 绔彛鍙�
VITE_PORT=5666
+# 搴旂敤鏍囬
+VITE_APP_TITLE=姹熻嫃鍟嗚锤
+
+# 褰撳墠鍏徃鏍囪瘑锛氬喅瀹氬簲鐢ㄥ悕绉� / Logo / 鍥炬爣锛堣 company.config.ts锛�
+VITE_COMPANY=JSSM
+
VITE_BASE=/
# 璇锋眰璺緞
@@ -21,4 +27,4 @@
VITE_APP_DEFAULT_PASSWORD=admin123
# 浜у搧璁捐妯″潡鏈湴 Mock锛堟棤鍚庣鏃舵紨绀猴級
-VITE_PD_MOCK=true
+VITE_PD_MOCK=true
\ No newline at end of file
diff --git a/company.config.ts b/company.config.ts
index 6f0227f..2fe97b9 100644
--- a/company.config.ts
+++ b/company.config.ts
@@ -71,4 +71,10 @@
favicon: '/logos/YZFXLogo.ico',
apiUrl: 'http://36.213.150.237:9006/admin-api',
},
+ JSSM: {
+ name: '姹熻嫃鍟嗚锤',
+ logo: '/logos/JSSM.svg',
+ favicon: '/logos/JSSM.svg',
+ apiUrl: '',
+ },
};
diff --git a/public/logos/JSSM.svg b/public/logos/JSSM.svg
new file mode 100644
index 0000000..a26e538
--- /dev/null
+++ b/public/logos/JSSM.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="姹熻嫃鍟嗚锤">
+ <defs>
+ <!-- 钘忛潚涓昏壊锛氬乏涓婅鐣ヤ寒锛屽彸涓嬭娌変笅鍘伙紝褰㈡垚浣撶Н鎰� -->
+ <linearGradient id="jssmNavy" x1="0" y1="0" x2="0.85" y2="1">
+ <stop offset="0%" stop-color="#1E4571"/>
+ <stop offset="52%" stop-color="#123156"/>
+ <stop offset="100%" stop-color="#0A1D35"/>
+ </linearGradient>
+ <!-- 閲戣壊锛氫笂浜笅娣憋紝妯℃嫙閲戝睘鍏夋辰 -->
+ <linearGradient id="jssmGold" x1="0" y1="0" x2="0" y2="1">
+ <stop offset="0%" stop-color="#EBD07E"/>
+ <stop offset="45%" stop-color="#D4AF37"/>
+ <stop offset="100%" stop-color="#B8901F"/>
+ </linearGradient>
+ </defs>
+
+ <!-- 鐩惧舰寰芥爣涓讳綋 -->
+ <path d="M8 14 A6 6 0 0 1 14 8 H50 A6 6 0 0 1 56 14 V32 C56 46 45.5 55.5 32 60 C18.5 55.5 8 46 8 32 Z"
+ fill="url(#jssmNavy)"/>
+ <!-- 澶栧湀閲戣竟锛氭繁鑹茶儗鏅笅闈犲畠鍕惧嫆杞粨 -->
+ <path d="M8 14 A6 6 0 0 1 14 8 H50 A6 6 0 0 1 56 14 V32 C56 46 45.5 55.5 32 60 C18.5 55.5 8 46 8 32 Z"
+ fill="none" stroke="url(#jssmGold)" stroke-width="1.5" opacity="0.9"/>
+ <!-- 鍐呭湀閲戠嚎锛氬鍔犲窘绔犵殑灞傛 -->
+ <path d="M12.5 15 A3.5 3.5 0 0 1 16 11.5 H48 A3.5 3.5 0 0 1 51.5 15 V32 C51.5 44 42.5 52.5 32 56.5 C21.5 52.5 12.5 44 12.5 32 Z"
+ fill="none" stroke="url(#jssmGold)" stroke-width="1" opacity="0.55"/>
+
+ <!-- 椤堕儴瀛︽湳涔嬫槦 -->
+ <path d="M32 15.6 L33.9 19 L32 22.4 L30.1 19 Z" fill="url(#jssmGold)"/>
+
+ <!-- 灞曞紑鐨勪功鏈細宸﹂〉 -->
+ <path d="M31.2 29.5 C27.4 26.1 22.2 24.6 17.8 25.5 V41.4 C22.2 40.5 27.4 42 31.2 45.4 Z"
+ fill="url(#jssmGold)"/>
+ <!-- 灞曞紑鐨勪功鏈細鍙抽〉锛堢暐鏆楋紝鎷夊紑宸﹀彸灞傛锛� -->
+ <path d="M32.8 29.5 C36.6 26.1 41.8 24.6 46.2 25.5 V41.4 C41.8 40.5 36.6 42 32.8 45.4 Z"
+ fill="url(#jssmGold)" opacity="0.78"/>
+ <!-- 涔﹁剨 -->
+ <path d="M32 29.5 V45.4" stroke="#0A1D35" stroke-width="1.6" stroke-linecap="round" opacity="0.55"/>
+</svg>
diff --git a/public/static/imgs/jssm-campus.svg b/public/static/imgs/jssm-campus.svg
new file mode 100644
index 0000000..5f97054
--- /dev/null
+++ b/public/static/imgs/jssm-campus.svg
@@ -0,0 +1,226 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900" preserveAspectRatio="xMidYMid slice" role="img" aria-label="瀛︽湳鏍″洯澶滄櫙">
+ <defs>
+ <!-- 澶滅┖锛氫笂娣变笅娴呯殑钘忛潚 -->
+ <linearGradient id="sky" x1="0" y1="0" x2="0.25" y2="1">
+ <stop offset="0%" stop-color="#08182C"/>
+ <stop offset="42%" stop-color="#0F2440"/>
+ <stop offset="72%" stop-color="#14375F"/>
+ <stop offset="100%" stop-color="#0B1C33"/>
+ </linearGradient>
+
+ <!-- 鏈堝厜鍏夋檿 -->
+ <radialGradient id="moonGlow" cx="0.5" cy="0.5" r="0.5">
+ <stop offset="0%" stop-color="#EBD07E" stop-opacity="0.30"/>
+ <stop offset="45%" stop-color="#D4AF37" stop-opacity="0.10"/>
+ <stop offset="100%" stop-color="#D4AF37" stop-opacity="0"/>
+ </radialGradient>
+
+ <!-- 寤虹瓚鍙楀厜闈細宸︿寒鍙虫殫 -->
+ <linearGradient id="facade" x1="0" y1="0" x2="1" y2="0.35">
+ <stop offset="0%" stop-color="#1E4571"/>
+ <stop offset="55%" stop-color="#16375C"/>
+ <stop offset="100%" stop-color="#0E2743"/>
+ </linearGradient>
+
+ <!-- 绌归《 -->
+ <linearGradient id="dome" x1="0.15" y1="0" x2="0.85" y2="1">
+ <stop offset="0%" stop-color="#2A5B8C"/>
+ <stop offset="60%" stop-color="#17395E"/>
+ <stop offset="100%" stop-color="#0D2340"/>
+ </linearGradient>
+
+ <!-- 閲戣壊绐楀厜 -->
+ <linearGradient id="winLight" x1="0" y1="0" x2="0" y2="1">
+ <stop offset="0%" stop-color="#EBD07E"/>
+ <stop offset="100%" stop-color="#C9A227"/>
+ </linearGradient>
+
+ <!-- 姘撮潰 -->
+ <linearGradient id="pool" x1="0" y1="0" x2="0" y2="1">
+ <stop offset="0%" stop-color="#0C2036"/>
+ <stop offset="100%" stop-color="#061320"/>
+ </linearGradient>
+
+ <!-- 姘撮潰閲戣壊鍊掑奖 -->
+ <linearGradient id="reflect" x1="0" y1="0" x2="0" y2="1">
+ <stop offset="0%" stop-color="#D4AF37" stop-opacity="0.22"/>
+ <stop offset="100%" stop-color="#D4AF37" stop-opacity="0"/>
+ </linearGradient>
+
+ <!-- 搴曢儴鍘嬫殫锛岀粰鏂囧瓧鐣欏嚭鍙鍖哄煙 -->
+ <linearGradient id="vignette" x1="0" y1="0" x2="0" y2="1">
+ <stop offset="0%" stop-color="#08182C" stop-opacity="0"/>
+ <stop offset="62%" stop-color="#08182C" stop-opacity="0.35"/>
+ <stop offset="100%" stop-color="#08182C" stop-opacity="0.85"/>
+ </linearGradient>
+ </defs>
+
+ <!-- ===== 澶滅┖ ===== -->
+ <rect width="900" height="900" fill="url(#sky)"/>
+
+ <!-- 鏈堜寒涓庡厜鏅� -->
+ <circle cx="686" cy="176" r="210" fill="url(#moonGlow)"/>
+ <circle cx="686" cy="176" r="46" fill="#EBD07E" opacity="0.92"/>
+ <circle cx="686" cy="176" r="46" fill="none" stroke="#F5E7C0" stroke-width="1" opacity="0.5"/>
+ <!-- 鏈堥潰鏆楅儴锛岃瀹冧笉鏄函鑹插渾 -->
+ <circle cx="672" cy="164" r="38" fill="#D4AF37" opacity="0.18"/>
+ <circle cx="700" cy="188" r="14" fill="#08182C" opacity="0.12"/>
+ <circle cx="672" cy="196" r="9" fill="#08182C" opacity="0.10"/>
+
+ <!-- 鏄熺偣 -->
+ <g fill="#EBD07E">
+ <circle cx="120" cy="96" r="1.8" opacity="0.55"/>
+ <circle cx="238" cy="152" r="1.3" opacity="0.42"/>
+ <circle cx="352" cy="82" r="2.1" opacity="0.6"/>
+ <circle cx="470" cy="134" r="1.4" opacity="0.4"/>
+ <circle cx="560" cy="72" r="1.7" opacity="0.5"/>
+ <circle cx="800" cy="118" r="1.5" opacity="0.45"/>
+ <circle cx="176" cy="228" r="1.2" opacity="0.32"/>
+ <circle cx="420" cy="206" r="1.6" opacity="0.44"/>
+ <circle cx="742" cy="268" r="1.3" opacity="0.34"/>
+ <circle cx="86" cy="330" r="1.5" opacity="0.3"/>
+ <circle cx="598" cy="184" r="1.1" opacity="0.3"/>
+ <circle cx="300" cy="286" r="1.2" opacity="0.28"/>
+ </g>
+
+ <!-- ===== 杩滃北 ===== -->
+ <path d="M0 556 L118 484 L214 534 L322 452 L430 528 L548 470 L662 540 L784 486 L900 552 L900 900 L0 900 Z"
+ fill="#0B1E36" opacity="0.75"/>
+
+ <!-- ===== 杩滄櫙妤肩兢 ===== -->
+ <g fill="#0D2440" opacity="0.85">
+ <rect x="42" y="520" width="46" height="72"/>
+ <rect x="98" y="546" width="34" height="46"/>
+ <rect x="748" y="530" width="42" height="62"/>
+ <rect x="800" y="556" width="30" height="36"/>
+ </g>
+
+ <!-- ===== 涓绘ゼ锛氬彴闃� ===== -->
+ <g>
+ <rect x="238" y="742" width="424" height="13" fill="#132E4E"/>
+ <rect x="256" y="729" width="388" height="13" fill="#17395E"/>
+ <rect x="274" y="716" width="352" height="13" fill="#1B4168"/>
+ </g>
+
+ <!-- ===== 涓绘ゼ锛氭煴寤� ===== -->
+ <rect x="286" y="560" width="328" height="156" fill="url(#facade)"/>
+
+ <!-- ===== 灞嬮《灞辫姳锛堜笁瑙掓ィ锛� ===== -->
+ <path d="M286 560 L450 470 L614 560 Z" fill="#17395E"/>
+ <path d="M286 560 L450 470 L614 560 Z" fill="none" stroke="#D4AF37" stroke-width="2" opacity="0.55"/>
+ <rect x="272" y="556" width="356" height="12" fill="#1B4168"/>
+
+ <!-- 灞辫姳鍐呯殑鍦嗗窘 -->
+ <circle cx="450" cy="528" r="24" fill="#0E2743" stroke="#D4AF37" stroke-width="1.6" opacity="0.9"/>
+ <circle cx="450" cy="528" r="13" fill="none" stroke="#D4AF37" stroke-width="1.2" opacity="0.65"/>
+ <circle cx="450" cy="528" r="4.5" fill="#D4AF37" opacity="0.85"/>
+
+ <!-- ===== 绌归《 ===== -->
+ <path d="M450 470 A62 62 0 0 1 512 470 Z" fill="url(#dome)" transform="translate(-62,0)"/>
+ <path d="M388 470 A62 62 0 0 1 512 470 Z" fill="url(#dome)"/>
+ <path d="M388 470 A62 62 0 0 1 512 470" fill="none" stroke="#D4AF37" stroke-width="1.6" opacity="0.6"/>
+ <rect x="444" y="382" width="12" height="28" fill="#17395E"/>
+ <circle cx="450" cy="376" r="8" fill="#D4AF37" opacity="0.9"/>
+ <!-- 濉斿皷鍏夌偣 -->
+ <circle cx="450" cy="376" r="18" fill="#EBD07E" opacity="0.16"/>
+
+ <!-- ===== 鍏牴绔嬫煴 ===== -->
+ <g fill="#1B4168">
+ <rect x="302" y="578" width="26" height="138"/>
+ <rect x="356" y="578" width="26" height="138"/>
+ <rect x="410" y="578" width="26" height="138"/>
+ <rect x="464" y="578" width="26" height="138"/>
+ <rect x="518" y="578" width="26" height="138"/>
+ <rect x="572" y="578" width="26" height="138"/>
+ </g>
+ <!-- 鏌卞ご涓庢煴纭� -->
+ <g fill="#24507C">
+ <rect x="298" y="572" width="34" height="10"/>
+ <rect x="352" y="572" width="34" height="10"/>
+ <rect x="406" y="572" width="34" height="10"/>
+ <rect x="460" y="572" width="34" height="10"/>
+ <rect x="514" y="572" width="34" height="10"/>
+ <rect x="568" y="572" width="34" height="10"/>
+ <rect x="300" y="708" width="30" height="10"/>
+ <rect x="354" y="708" width="30" height="10"/>
+ <rect x="408" y="708" width="30" height="10"/>
+ <rect x="462" y="708" width="30" height="10"/>
+ <rect x="516" y="708" width="30" height="10"/>
+ <rect x="570" y="708" width="30" height="10"/>
+ </g>
+
+ <!-- ===== 鏌遍棿绐楀厜 ===== -->
+ <g fill="url(#winLight)">
+ <rect x="332" y="612" width="20" height="34" opacity="0.82"/>
+ <rect x="386" y="612" width="20" height="34" opacity="0.62"/>
+ <rect x="440" y="612" width="20" height="34" opacity="0.9"/>
+ <rect x="494" y="612" width="20" height="34" opacity="0.58"/>
+ <rect x="548" y="612" width="20" height="34" opacity="0.78"/>
+ </g>
+ <g fill="url(#winLight)">
+ <rect x="332" y="662" width="20" height="30" opacity="0.55"/>
+ <rect x="386" y="662" width="20" height="30" opacity="0.72"/>
+ <rect x="440" y="662" width="20" height="30" opacity="0.6"/>
+ <rect x="494" y="662" width="20" height="30" opacity="0.8"/>
+ <rect x="548" y="662" width="20" height="30" opacity="0.5"/>
+ </g>
+
+ <!-- 涓ぎ澶ч棬 -->
+ <path d="M432 716 L432 676 A18 18 0 0 1 468 676 L468 716 Z" fill="#0E2743"/>
+ <path d="M432 716 L432 676 A18 18 0 0 1 468 676 L468 716" fill="none" stroke="#D4AF37" stroke-width="1.4" opacity="0.6"/>
+ <rect x="448" y="676" width="1.6" height="40" fill="#D4AF37" opacity="0.45"/>
+
+ <!-- 闂ㄥ墠鐨勪袱鐩忓鐏� -->
+ <circle cx="414" cy="700" r="5" fill="#EBD07E" opacity="0.9"/>
+ <circle cx="414" cy="700" r="14" fill="#EBD07E" opacity="0.16"/>
+ <circle cx="486" cy="700" r="5" fill="#EBD07E" opacity="0.9"/>
+ <circle cx="486" cy="700" r="14" fill="#EBD07E" opacity="0.16"/>
+
+ <!-- ===== 涓や晶鏍戞湪 ===== -->
+ <g fill="#0A1B2F">
+ <!-- 宸︽爲 -->
+ <rect x="146" y="700" width="10" height="60"/>
+ <ellipse cx="151" cy="666" rx="52" ry="42"/>
+ <ellipse cx="120" cy="690" rx="34" ry="28"/>
+ <ellipse cx="182" cy="688" rx="30" ry="26"/>
+ <!-- 鍙虫爲 -->
+ <rect x="742" y="704" width="10" height="56"/>
+ <ellipse cx="747" cy="672" rx="48" ry="40"/>
+ <ellipse cx="718" cy="694" rx="32" ry="26"/>
+ <ellipse cx="776" cy="692" rx="28" ry="24"/>
+ </g>
+ <!-- 鏍戝啝鍙楀厜杈� -->
+ <g fill="none" stroke="#D4AF37" stroke-width="1.1" opacity="0.18">
+ <ellipse cx="151" cy="666" rx="52" ry="42"/>
+ <ellipse cx="747" cy="672" rx="48" ry="40"/>
+ </g>
+
+ <!-- ===== 鍓嶆櫙姘撮潰 ===== -->
+ <rect x="0" y="755" width="900" height="145" fill="url(#pool)"/>
+ <rect x="0" y="755" width="900" height="1.6" fill="#D4AF37" opacity="0.22"/>
+
+ <!-- 寤虹瓚鍦ㄦ按闈㈢殑鍊掑奖 -->
+ <g opacity="0.5">
+ <rect x="300" y="758" width="300" height="66" fill="url(#facade)" opacity="0.35"/>
+ <rect x="330" y="758" width="18" height="52" fill="#D4AF37" opacity="0.16"/>
+ <rect x="384" y="758" width="18" height="52" fill="#D4AF37" opacity="0.12"/>
+ <rect x="438" y="758" width="18" height="52" fill="#D4AF37" opacity="0.2"/>
+ <rect x="492" y="758" width="18" height="52" fill="#D4AF37" opacity="0.12"/>
+ <rect x="546" y="758" width="18" height="52" fill="#D4AF37" opacity="0.16"/>
+ </g>
+ <rect x="0" y="755" width="900" height="120" fill="url(#reflect)"/>
+
+ <!-- 姘撮潰娉㈢汗 -->
+ <g stroke="#EBD07E" stroke-width="1.2" opacity="0.16" stroke-linecap="round">
+ <line x1="286" y1="792" x2="356" y2="792"/>
+ <line x1="404" y1="806" x2="490" y2="806"/>
+ <line x1="520" y1="786" x2="596" y2="786"/>
+ <line x1="330" y1="826" x2="420" y2="826"/>
+ <line x1="470" y1="842" x2="556" y2="842"/>
+ <line x1="180" y1="812" x2="238" y2="812"/>
+ <line x1="660" y1="820" x2="726" y2="820"/>
+ </g>
+
+ <!-- ===== 搴曢儴鍘嬫殫 ===== -->
+ <rect width="900" height="900" fill="url(#vignette)"/>
+</svg>
diff --git a/src/packages/effects/layouts/src/authentication/authentication.vue b/src/packages/effects/layouts/src/authentication/authentication.vue
index 89299ae..47cf399 100644
--- a/src/packages/effects/layouts/src/authentication/authentication.vue
+++ b/src/packages/effects/layouts/src/authentication/authentication.vue
@@ -7,7 +7,6 @@
import { Copyright } from '../basic/copyright';
import AuthenticationFormView from './form.vue';
-import SloganIcon from './icons/slogan.vue';
import Toolbar from './toolbar.vue';
interface Props {
@@ -103,34 +102,39 @@
</div>
</slot>
- <!-- 绯荤粺浠嬬粛 -->
+ <!-- 绯荤粺浠嬬粛锛氭牎鍥鏅彃鐢婚摵婊� + 宸︿笅瑙掑搧鐗屾枃妗� -->
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
<div
class="absolute inset-0 size-full bg-background-deep dark:bg-[#070709]"
>
- <div class="login-background absolute top-0 left-0 size-full"></div>
+ <!-- 鎵嬬粯鏍″洯鎻掔敾锛涘閮ㄤ紶鍏� sloganImage 鏃朵紭鍏堢敤澶栭儴鍥� -->
+ <img
+ v-if="sloganImage"
+ alt=""
+ class="campus-illustration"
+ :src="sloganImage"
+ />
+ <img
+ v-else
+ alt=""
+ class="campus-illustration"
+ src="/static/imgs/jssm-campus.svg"
+ />
+ <!-- 鍘嬫殫鍙犲眰锛氬簳閮ㄥ姞閲嶏紝淇濊瘉鏂囧瓧鍙 -->
+ <div class="campus-overlay"></div>
+ <div class="academic-bg-pattern"></div>
+
<div
:key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
- class="mr-20 flex-col-center h-full"
+ class="campus-content"
:class="{
'enter-x': authPanelLeft,
'-enter-x': authPanelRight,
}"
>
- <template v-if="sloganImage">
- <img
- :alt="appName"
- :src="sloganImage"
- class="h-64 w-2/5 animate-float"
- />
- </template>
- <SloganIcon v-else :alt="appName" class="h-64 w-2/5 animate-float" />
- <div class="text-1xl mt-6 font-sans text-foreground lg:text-2xl">
- {{ pageTitle }}
- </div>
- <div class="mt-2 dark:text-muted-foreground">
- {{ pageDescription }}
- </div>
+ <div class="campus-rule"></div>
+ <div class="academic-brand-title">{{ pageTitle }}</div>
+ <div class="academic-brand-desc">{{ pageDescription }}</div>
</div>
</div>
</div>
@@ -138,6 +142,8 @@
<!-- 涓績璁よ瘉闈㈡澘 -->
<div v-if="authPanelCenter" class="relative flex-center w-full">
<div class="login-background absolute top-0 left-0 size-full"></div>
+ <!-- 瀛︽湳椋庤楗扮綉鏍艰儗鏅� -->
+ <div class="academic-bg-pattern"></div>
<AuthenticationFormView
class="w-full rounded-3xl pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]"
data-side="bottom"
@@ -172,25 +178,85 @@
</template>
<style scoped>
-.login-background {
- background: linear-gradient(
- 154deg,
- #07070915 30%,
- hsl(var(--primary) / 30%) 48%,
- #07070915 64%
- );
- filter: blur(100px);
+/* 鏍″洯鎻掔敾閾烘弧宸︿晶鍝佺墝鍖猴紱object-position 鐣ュ亸涓婏紝淇濅綇寤虹瓚涓讳綋 */
+.campus-illustration {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center 34%;
+}
+
+/* 鍙犲眰锛氬簳閮ㄥ帇鏆楃粰鏂囧瓧锛屽乏渚х暐鏆椾互绐佸嚭鐧借壊鏍囬 */
+.campus-overlay {
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(
+ 180deg,
+ rgba(8, 24, 44, 0.12) 0%,
+ rgba(8, 24, 44, 0.22) 42%,
+ rgba(8, 24, 44, 0.86) 100%
+ ),
+ linear-gradient(
+ 90deg,
+ rgba(8, 24, 44, 0.4) 0%,
+ rgba(8, 24, 44, 0) 58%
+ );
+}
+
+/* 瑁呴グ缃戞牸锛氬帇鍒板嚑涔庝笉鍙鐨勯噾鑹茬粏绾� */
+.academic-bg-pattern {
+ position: absolute;
+ inset: 0;
+ background-image:
+ linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
+ background-size: 72px 72px;
+ pointer-events: none;
+}
+
+/* 鍝佺墝鏂囨锛氬畾浣嶅埌宸︿笅瑙� */
+.campus-content {
+ position: absolute;
+ bottom: 68px;
+ left: 56px;
+ z-index: 10;
+ max-width: 64%;
+}
+
+/* 鏍囬涓婃柟鐨勯噾鑹茬煭妯嚎 */
+.campus-rule {
+ width: 46px;
+ height: 2px;
+ margin-bottom: 20px;
+ border-radius: 2px;
+ background: linear-gradient(90deg, #e3c567, #b8901f);
+}
+
+/* 鍝佺墝鍖烘爣棰橈細绫崇櫧锛岄槾褰辨敹鏁涗互淇濇寔搴勯噸 */
+.academic-brand-title {
+ color: #f5f0e4 !important;
+ font-size: 26px;
+ font-weight: 600;
+ letter-spacing: 5px;
+ text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
+}
+
+.academic-brand-desc {
+ margin-top: 12px;
+ color: rgba(212, 175, 55, 0.85) !important;
+ font-size: 13.5px;
+ letter-spacing: 3px;
}
.dark {
- .login-background {
- background: linear-gradient(
- 154deg,
- #07070915 30%,
- hsl(var(--primary) / 20%) 48%,
- #07070915 64%
- );
- filter: blur(100px);
+ .academic-bg-pattern {
+ background-image:
+ linear-gradient(rgba(212, 175, 55, 0.045) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(212, 175, 55, 0.045) 1px, transparent 1px);
+ background-size: 72px 72px;
}
}
</style>
diff --git a/src/packages/locales/src/langs/en-US/authentication.json b/src/packages/locales/src/langs/en-US/authentication.json
index d1fd9b7..f87671f 100644
--- a/src/packages/locales/src/langs/en-US/authentication.json
+++ b/src/packages/locales/src/langs/en-US/authentication.json
@@ -1,10 +1,10 @@
{
"welcomeBack": "Welcome Back",
- "pageTitle": "Plug-and-play Admin system",
- "pageDesc": "Efficient, versatile frontend template",
+ "pageTitle": "Unified Management Platform",
+ "pageDesc": "Collaboration 路 Data-driven 路 Standardized Process",
"loginSuccess": "Login Successful",
"loginSuccessDesc": "Welcome Back",
- "loginSubtitle": "Enter your account details to manage your projects",
+ "loginSubtitle": "Enter your account details to sign in",
"selectAccount": "Quick Select Account",
"username": "Username",
"password": "Password",
@@ -46,7 +46,7 @@
"githubLogin": "Github Login",
"googleLogin": "Google Login",
"dingdingLogin": "Dingding Login",
- "codeSubtitle": "Enter your phone number to start managing your project",
+ "codeSubtitle": "Enter your mobile number to sign in",
"code": "Security code",
"codeTip": "Security code required {0} characters",
"mobile": "Mobile",
@@ -67,4 +67,4 @@
"alignLeft": "Align Left",
"alignRight": "Align Right"
}
-}
+}
\ No newline at end of file
diff --git a/src/packages/locales/src/langs/zh-CN/authentication.json b/src/packages/locales/src/langs/zh-CN/authentication.json
index 9f4508c..f8b323e 100644
--- a/src/packages/locales/src/langs/zh-CN/authentication.json
+++ b/src/packages/locales/src/langs/zh-CN/authentication.json
@@ -1,10 +1,10 @@
{
"welcomeBack": "娆㈣繋鍥炴潵",
- "pageTitle": "寮�绠卞嵆鐢ㄧ殑澶у瀷涓悗鍙扮鐞嗙郴缁�",
- "pageDesc": "宸ョ▼鍖栥�侀珮鎬ц兘銆佽法缁勪欢搴撶殑鍓嶇妯＄増",
+ "pageTitle": "缁熶竴绠＄悊骞冲彴",
+ "pageDesc": "鍗忓悓鍔炲叕 路 鏁版嵁鍐崇瓥 路 娴佺▼瑙勮寖",
"loginSuccess": "鐧诲綍鎴愬姛",
"loginSuccessDesc": "娆㈣繋鍥炴潵",
- "loginSubtitle": "璇疯緭鍏ユ偍鐨勮处鎴蜂俊鎭互寮�濮嬬鐞嗘偍鐨勯」鐩�",
+ "loginSubtitle": "璇疯緭鍏ヨ处鍙蜂俊鎭櫥褰曠粺涓�绠＄悊骞冲彴",
"selectAccount": "蹇�熼�夋嫨璐﹀彿",
"username": "璐﹀彿",
"password": "瀵嗙爜",
@@ -46,7 +46,7 @@
"githubLogin": "Github鐧诲綍",
"googleLogin": "Google鐧诲綍",
"dingdingLogin": "閽夐拤鐧诲綍",
- "codeSubtitle": "璇疯緭鍏ユ偍鐨勬墜鏈哄彿鐮佷互寮�濮嬬鐞嗘偍鐨勯」鐩�",
+ "codeSubtitle": "璇疯緭鍏ユ墜鏈哄彿鐮佺櫥褰曠粺涓�绠＄悊骞冲彴",
"code": "楠岃瘉鐮�",
"codeTip": "璇疯緭鍏0}浣嶉獙璇佺爜",
"mobile": "鎵嬫満鍙风爜",
@@ -67,4 +67,4 @@
"alignLeft": "灞呭乏",
"alignRight": "灞呭彸"
}
-}
+}
\ No newline at end of file
diff --git a/src/views/_core/authentication/login.vue b/src/views/_core/authentication/login.vue
index 0d0f566..3e2356d 100644
--- a/src/views/_core/authentication/login.vue
+++ b/src/views/_core/authentication/login.vue
@@ -22,6 +22,9 @@
defineOptions({ name: 'Login' });
+// vite.config.ts 娉ㄥ叆鐨勫叕鍙� Logo 璺緞
+declare const __APP_LOGO__: string;
+
const authStore = useAuthStore();
const accessStore = useAccessStore();
const tenantEnable = isTenantEnable();
@@ -31,6 +34,12 @@
const verifyRef = ref();
const captchaType = 'blockPuzzle'; // 楠岃瘉鐮佺被鍨嬶細'blockPuzzle' | 'clickWord'
+
+/** 搴旂敤鏍囬锛堢櫥褰曢〉鍝佺墝鏂囧瓧锛� */
+const appTitle = import.meta.env.VITE_APP_TITLE || '姹熻嫃鍟嗚锤';
+
+/** 鍝佺墝寰芥爣锛氬鐢� vite 娉ㄥ叆鐨勫叕鍙� Logo锛岀己鐪佸洖钀藉埌鍐呯疆鍥炬爣 */
+const brandLogo = __APP_LOGO__ || '/logos/JSSM.svg';
/** 鑾峰彇绉熸埛鍒楄〃 */
const tenantList = ref<AuthApi.TenantResult[]>([]); // 绉熸埛鍒楄〃
@@ -107,25 +116,6 @@
const formSchema = computed((): VbenFormSchema[] => {
return [
- // {
- // component: 'VbenSelect',
- // componentProps: {
- // options: tenantList.value.map((item) => ({
- // label: item.name,
- // value: item.id.toString(),
- // })),
- // placeholder: $t('authentication.tenantTip'),
- // },
- // fieldName: 'tenantId',
- // label: $t('authentication.tenant'),
- // dependencies: {
- // triggerFields: ['tenantId'],
- // if: tenantEnable,
- // trigger(values) {
- // accessStore.setTenantId(values.tenantId ? Number(values.tenantId) : null);
- // },
- // },
- // },
{
component: 'VbenInput',
componentProps: {
@@ -155,7 +145,14 @@
</script>
<template>
- <div>
+ <div class="academic-login-wrapper">
+ <!-- 椤堕儴鍝佺墝鏍囪瘑锛氬窘鏍� + 骞冲彴鍚� + 閲戣壊鍒嗛殧绾� -->
+ <div class="academic-login-header">
+ <img :alt="appTitle" :src="brandLogo" class="academic-brand-logo" />
+ <h2 class="academic-brand-name">{{ appTitle }}</h2>
+ <div class="academic-decoration-line"></div>
+ </div>
+
<AuthenticationLogin
ref="loginRef"
:form-schema="formSchema"
@@ -166,29 +163,39 @@
:show-register="false"
:show-forget-password="false"
:show-doc-link="false"
+ class="academic-login-form"
@submit="handleLogin"
>
+ <!-- 鑷畾涔夋爣棰橈細瑕嗙洊娆㈣繋璇� -->
+ <template #title>
+ <div class="academic-title-area">
+ <h3 class="academic-title">璐﹀彿鐧诲綍</h3>
+ <p class="academic-subtitle">{{ $t('authentication.loginSubtitle') }}</p>
+ </div>
+ </template>
+
+ <!-- 绗笁鏂圭櫥褰� -->
<template #third-party-login>
- <div class="mt-4">
- <div class="mb-4 flex items-center justify-between">
- <span class="w-[35%] border-b border-input dark:border-gray-600"></span>
- <span class="text-center text-xs text-muted-foreground">
- 鍏朵粬鐧诲綍鏂瑰紡
- </span>
- <span class="w-[35%] border-b border-input dark:border-gray-600"></span>
+ <div class="academic-third-party">
+ <div class="academic-divider">
+ <span class="academic-divider-line"></span>
+ <span class="academic-divider-text">鍏朵粬鐧诲綍鏂瑰紡</span>
+ <span class="academic-divider-line"></span>
</div>
<VbenButton
- class="w-full"
+ class="academic-wxcp-btn"
variant="outline"
:loading="wxcpLoading"
@click="handleWxcpLogin"
>
- <SvgWeChatIcon class="mr-2 size-5" />
+ <SvgWeChatIcon class="mr-2 size-4" />
浼佷笟寰俊鐧诲綍
</VbenButton>
</div>
</template>
</AuthenticationLogin>
+
+ <!-- 楠岃瘉鐮侊紙婊戝潡鎷煎浘锛夛紝captchaEnable 鏃跺惎鐢� -->
<Verification
ref="verifyRef"
v-if="captchaEnable"
@@ -201,3 +208,203 @@
/>
</div>
</template>
+
+<style scoped>
+/* ========== 瀛︽湳绉戠爺椋庢牸鐧诲綍椤垫牱寮� ========== */
+.academic-login-wrapper {
+ @apply relative flex flex-col w-full;
+ min-height: 460px;
+}
+
+/* ---- 椤堕儴鍝佺墝鏍囪瘑 ---- */
+.academic-login-header {
+ @apply flex flex-col items-center mb-8;
+}
+
+.academic-brand-logo {
+ width: 52px;
+ height: 52px;
+ margin-bottom: 16px;
+ filter: drop-shadow(0 3px 10px rgba(15, 36, 64, 0.14));
+}
+
+.academic-brand-name {
+ font-size: 19px;
+ font-weight: 600;
+ letter-spacing: 5px;
+ /* 鏈瓧鍙充晶浼氬鍑轰竴浠藉瓧璺濓紝鐢ㄧ瓑閲忕缉杩涙姷娑堬紝瑙嗚鎵嶇湡姝ｅ眳涓� */
+ text-indent: 5px;
+ color: #0f2440;
+ margin: 0 0 14px;
+}
+
+.academic-decoration-line {
+ position: relative;
+ width: 58px;
+ height: 2px;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ #d4af37 32%,
+ #d4af37 68%,
+ transparent
+ );
+ border-radius: 2px;
+}
+
+/* 閲戠嚎涓ぎ鐨勮彵褰㈢偣缂� */
+.academic-decoration-line::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 6px;
+ height: 6px;
+ background: #d4af37;
+ border-radius: 1px;
+ transform: translate(-50%, -50%) rotate(45deg);
+}
+
+/* ---- 鑷畾涔夋爣棰� ---- */
+.academic-title-area {
+ @apply text-left mb-6;
+}
+
+.academic-title {
+ font-size: 26px;
+ font-weight: 600;
+ color: #0f2440;
+ letter-spacing: 2px;
+ margin: 0 0 8px 0;
+ line-height: 1.35;
+}
+
+.academic-subtitle {
+ font-size: 13.5px;
+ color: #8a94a6;
+ margin: 0;
+ letter-spacing: 0.3px;
+}
+
+/* ---- 瑕嗙洊榛樿鏍囬 ---- */
+:deep(.academic-login-form .mb-7) {
+ display: none;
+}
+
+/* ---- 杈撳叆妗嗭細鏆栫櫧搴� + 閲戣壊鑱氱劍 ---- */
+:deep(.academic-login-form .vben-input) {
+ border-radius: 8px;
+ border-color: #e6e2d8;
+ background: #fdfcfa;
+ transition: all 0.25s ease;
+ height: 48px;
+}
+
+:deep(.academic-login-form .vben-input:hover) {
+ border-color: #c9b77a;
+}
+
+:deep(.academic-login-form .vben-input:focus-within) {
+ border-color: #d4af37;
+ background: #fff;
+ box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.13);
+}
+
+/* ---- 鐧诲綍鎸夐挳锛氳棌闈掓笎鍙� + 閲戣壊鎻忚竟涓庢枃瀛� ---- */
+:deep(.academic-login-form .w-full > button),
+:deep(.academic-login-form button[aria-label="login"]) {
+ height: 48px;
+ border-radius: 8px;
+ background: linear-gradient(135deg, #1e4571, #0f2440) !important;
+ border: 1px solid rgba(212, 175, 55, 0.45) !important;
+ font-size: 15px;
+ font-weight: 600;
+ letter-spacing: 6px;
+ text-indent: 6px;
+ box-shadow: 0 6px 18px rgba(15, 36, 64, 0.22);
+ transition: all 0.3s ease;
+ color: #f5e7c0 !important;
+}
+
+/* 鎮仠鍙姞娣辨弿杈逛笌鎶曞奖锛屼笉鍋氫綅绉伙紝淇濇寔鍏嬪埗 */
+:deep(.academic-login-form .w-full > button:hover),
+:deep(.academic-login-form button[aria-label="login"]:hover) {
+ box-shadow:
+ 0 8px 22px rgba(15, 36, 64, 0.26),
+ 0 0 0 1px rgba(212, 175, 55, 0.6);
+}
+
+:deep(.academic-login-form .w-full > button:active),
+:deep(.academic-login-form button[aria-label="login"]:active) {
+ box-shadow: 0 3px 12px rgba(15, 36, 64, 0.24);
+}
+
+/* ---- 璁颁綇璐﹀彿 / 蹇樿瀵嗙爜 ---- */
+:deep(.academic-login-form .vben-link) {
+ color: #b8901f;
+ font-weight: 500;
+ transition: color 0.2s;
+}
+
+:deep(.academic-login-form .vben-link:hover) {
+ color: #8a6a12;
+}
+
+/* ---- 绗笁鏂圭櫥褰� ---- */
+.academic-third-party {
+ @apply mt-5;
+}
+
+.academic-divider {
+ @apply flex items-center gap-3 mb-4;
+}
+
+.academic-divider-line {
+ flex: 1;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
+}
+
+.academic-divider-text {
+ @apply text-xs;
+ color: #94a3b8;
+ white-space: nowrap;
+ letter-spacing: 0.5px;
+}
+
+.academic-wxcp-btn {
+ @apply w-full rounded-lg;
+ height: 44px;
+ border-color: #e6e2d8;
+ color: #44546a;
+ font-weight: 500;
+ transition: all 0.3s;
+}
+
+.academic-wxcp-btn:hover {
+ border-color: #d4af37;
+ color: #0f2440;
+ background: rgba(212, 175, 55, 0.06);
+}
+
+/* ---- 鏆楄壊閫傞厤 ---- */
+:root.dark .academic-title {
+ color: #f0ead8;
+}
+
+:root.dark .academic-brand-name {
+ color: #f0ead8;
+}
+
+:root.dark .academic-subtitle {
+ color: #8a94a6;
+}
+
+:root.dark .academic-decoration-line {
+ background: linear-gradient(90deg, #8bb4f0, #4a7ad4);
+}
+
+:root.dark .academic-footer-text {
+ color: #64748b;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/analytics/data.ts b/src/views/dashboard/analytics/data.ts
deleted file mode 100644
index 3de09c7..0000000
--- a/src/views/dashboard/analytics/data.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { MesHomeApi } from '#/api/mes/home';
-
-export const defaultSummary: MesHomeApi.Summary = {
- workOrderActiveCount: 0,
- workOrderPrepareCount: 0,
- workOrderFinishedCount: 0,
- todayOutput: 0,
- yesterdayOutput: 0,
- todayQualifiedQuantity: 0,
- todayUnqualifiedQuantity: 0,
- machineryTotal: 0,
- machineryProducing: 0,
- machineryStop: 0,
- machineryMaintenance: 0,
- andonActiveCount: 0,
- repairActiveCount: 0,
-};
diff --git a/src/views/dashboard/analytics/index.vue b/src/views/dashboard/analytics/index.vue
index 13794de..f352c08 100644
--- a/src/views/dashboard/analytics/index.vue
+++ b/src/views/dashboard/analytics/index.vue
@@ -1,25 +1,23 @@
<script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
-import { Card, Col, Row } from 'ant-design-vue';
+import { Col, Row } from 'ant-design-vue';
-import { getHomeSummary } from '#/api/mes/home';
-
-import { defaultSummary } from './data';
-import AiInsights from './modules/ai-insights.vue';
-import AlertPanel from './modules/alert-panel.vue';
-import BizCards from './modules/biz-cards.vue';
import KpiCards from './modules/kpi-cards.vue';
-import ProductionTrend from './modules/production-trend.vue';
import QuickActions from './modules/quick-actions.vue';
+import RecentApplications from './modules/recent-applications.vue';
+import TodoPanel from './modules/todo-panel.vue';
defineOptions({ name: 'DashboardAnalytics' });
+// vite.config.ts 娉ㄥ叆鐨勫叕鍙� Logo 璺緞
+declare const __APP_LOGO__: string;
+const brandLogo = __APP_LOGO__ || '/logos/JSSM.svg';
+
const router = useRouter();
-const summary = ref(defaultSummary);
const greeting = computed(() => {
const hour = new Date().getHours();
@@ -40,94 +38,103 @@
function handleNavigate(name: string) {
router.push({ name });
}
-
-async function loadSummary() {
- summary.value = await getHomeSummary();
-}
-
-onMounted(() => {
- loadSummary();
-});
</script>
<template>
<Page auto-content-height>
- <!-- 娆㈣繋鏍� -->
- <div class="glass-card mb-6 flex items-center justify-between rounded-2xl p-6">
- <div>
- <h1 class="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-500 bg-clip-text text-2xl font-bold text-transparent dark:from-blue-400 dark:via-purple-400 dark:to-pink-400">
- {{ greeting }}锛屾杩庡洖鏉�
- </h1>
- <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ today }}</p>
- </div>
- <div class="hidden items-center gap-2 sm:flex">
- <div class="flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-medium text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400">
- <span class="relative flex size-2">
- <span class="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
- <span class="relative inline-flex size-2 rounded-full bg-emerald-500" />
- </span>
+ <!-- 娆㈣繋鏍忥細钘忛潚搴� + 閲戣壊鎻忚竟 -->
+ <div class="elite-hero mb-6">
+ <img alt="" class="elite-hero-mark" :src="brandLogo" />
+ <div class="relative z-10 flex flex-wrap items-center justify-between gap-4">
+ <div>
+ <h1 class="elite-hero-title">{{ greeting }}锛屾杩庡洖鏉�</h1>
+ <p class="elite-hero-date">{{ today }}</p>
+ </div>
+ <div class="elite-status">
+ <span class="elite-status-dot"></span>
绯荤粺杩愯涓�
</div>
</div>
</div>
- <!-- MES 鐢熶骇 KPI -->
- <KpiCards :summary="summary" @navigate="handleNavigate" />
+ <!-- 绯荤粺鎸囨爣 -->
+ <KpiCards @navigate="handleNavigate" />
- <!-- ERP/WMS/BPM 缁忚惀 KPI -->
- <BizCards @navigate="handleNavigate" />
-
- <!-- AI 鏅鸿兘鍒嗘瀽 -->
- <AiInsights
- :active-order-count="summary.workOrderActiveCount"
- @navigate="handleNavigate"
- />
-
- <!-- 鐢熶骇瓒嬪娍 + 棰勮闈㈡澘 -->
+ <!-- 寰呭姙 + 蹇嵎鍏ュ彛 -->
<Row :gutter="16" class="mb-4">
<Col :lg="14" :md="24" :sm="24" :xl="14" :xs="24" class="mb-4">
- <div class="glass-card rounded-2xl p-5">
- <h3 class="mb-4 text-base font-semibold text-gray-800 dark:text-gray-100">
- 鐢熶骇瓒嬪娍锛堣繎7澶╋級
- </h3>
- <ProductionTrend />
- </div>
+ <TodoPanel @navigate="handleNavigate" />
</Col>
<Col :lg="10" :md="24" :sm="24" :xl="10" :xs="24" class="mb-4">
- <AlertPanel
- :repair-active-count="summary.repairActiveCount"
- @navigate="handleNavigate"
- />
- </Col>
- </Row>
-
- <!-- 蹇嵎鎿嶄綔 -->
- <Row :gutter="16" class="mb-4">
- <Col :span="24">
<QuickActions @navigate="handleNavigate" />
</Col>
</Row>
+
+ <!-- 鏈�杩戣棰樼敵鎶� -->
+ <RecentApplications @navigate="handleNavigate" />
</Page>
</template>
<style scoped>
-.glass-card {
- background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.5));
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(255,255,255,0.6);
- box-shadow:
- 0 8px 32px rgba(0,0,0,0.04),
- 0 2px 8px rgba(0,0,0,0.02),
- inset 0 1px 0 rgba(255,255,255,0.8);
+/* ===== 娆㈣繋鏍� ===== */
+.elite-hero {
+ position: relative;
+ overflow: hidden;
+ border-radius: 12px;
+ padding: 30px 34px;
+ background:
+ radial-gradient(circle at 88% 12%, rgba(212, 175, 55, 0.08), transparent 50%),
+ linear-gradient(135deg, #123156 0%, #0f2440 58%, #0b1c33 100%);
+ border: 1px solid rgba(212, 175, 55, 0.24);
+ box-shadow: 0 4px 18px rgba(15, 36, 64, 0.12);
}
-.dark .glass-card {
- background: linear-gradient(135deg, rgba(30,30,50,0.7), rgba(20,20,40,0.5));
- border: 1px solid rgba(255,255,255,0.08);
- box-shadow:
- 0 8px 32px rgba(0,0,0,0.3),
- 0 2px 8px rgba(0,0,0,0.2),
- inset 0 1px 0 rgba(255,255,255,0.05);
+/* 鍙充晶娣℃贰鐨勫窘鏍囨按鍗� */
+.elite-hero-mark {
+ position: absolute;
+ top: 50%;
+ right: 168px;
+ width: 118px;
+ height: 118px;
+ pointer-events: none;
+ opacity: 0.05;
+ transform: translateY(-50%);
+}
+
+.elite-hero-title {
+ margin: 0;
+ font-size: 22px;
+ font-weight: 600;
+ letter-spacing: 2px;
+ color: #f5f0e4;
+}
+
+.elite-hero-date {
+ margin: 8px 0 0;
+ font-size: 13px;
+ letter-spacing: 1px;
+ color: rgba(212, 175, 55, 0.85);
+}
+
+.elite-status {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 7px 16px;
+ font-size: 12.5px;
+ letter-spacing: 1px;
+ color: #f0e2b8;
+ background: rgba(212, 175, 55, 0.12);
+ border: 1px solid rgba(212, 175, 55, 0.38);
+ border-radius: 999px;
+}
+
+/* 闈欐�佺姸鎬佺偣锛屼笉鍋氳剦鍐插姩鐢� */
+.elite-status-dot {
+ display: inline-flex;
+ width: 7px;
+ height: 7px;
+ border-radius: 999px;
+ background: #d4af37;
}
</style>
diff --git a/src/views/dashboard/analytics/modules/ai-insights.vue b/src/views/dashboard/analytics/modules/ai-insights.vue
deleted file mode 100644
index 5e1a550..0000000
--- a/src/views/dashboard/analytics/modules/ai-insights.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script lang="ts" setup>
-import { IconifyIcon } from '@vben/icons';
-
-defineOptions({ name: 'DashboardAiInsights' });
-
-const props = defineProps<{
- activeOrderCount: number;
-}>();
-
-const emit = defineEmits<{
- navigate: [name: string];
-}>();
-
-interface AiCapability {
- key: string;
- title: string;
- desc: string;
- icon: string;
- gradient: string;
- route: string;
-}
-
-const capabilities: AiCapability[] = [
- {
- key: 'material',
- title: 'AI 鐗╂枡棰勬祴',
- desc: '棰勬祴鐗╂枡闇�姹備笌鐭己椋庨櫓',
- icon: 'lucide:package-open',
- gradient: 'from-violet-500 to-purple-500',
- route: 'MesProWorkOrder',
- },
- {
- key: 'duration',
- title: 'AI 鏃堕暱棰勬祴',
- desc: '棰勬祴鍚勫伐搴忕敓浜ц�楁椂',
- icon: 'lucide:clock',
- gradient: 'from-sky-500 to-blue-500',
- route: 'MesProWorkOrder',
- },
- {
- key: 'risk',
- title: 'AI 椋庨櫓棰勬祴',
- desc: '璇嗗埆娼滃湪鐢熶骇椋庨櫓骞剁粰鍑哄缓璁�',
- icon: 'lucide:shield-alert',
- gradient: 'from-orange-500 to-red-500',
- route: 'MesProWorkOrder',
- },
- {
- key: 'delivery',
- title: 'AI 浜や粯璇勪及',
- desc: '璇勪及璁㈠崟浜や粯鍑嗘椂鐜囦笌寤舵湡鍥犵礌',
- icon: 'lucide:truck',
- gradient: 'from-emerald-500 to-teal-500',
- route: 'MesProWorkOrder',
- },
-];
-</script>
-
-<template>
- <div class="glass-card mb-4 rounded-2xl p-5">
- <div class="mb-4 flex items-center justify-between">
- <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100">
- AI 鏅鸿兘鍒嗘瀽
- </h3>
- <span class="rounded-full bg-violet-50 px-3 py-0.5 text-xs font-medium text-violet-600 dark:bg-violet-500/15 dark:text-violet-400">
- {{ activeOrderCount }} 涓伐鍗曞彲鍒嗘瀽
- </span>
- </div>
- <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
- <div
- v-for="cap in capabilities"
- :key="cap.key"
- class="group flex cursor-pointer items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
- @click="emit('navigate', cap.route)"
- >
- <div
- class="flex size-10 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br shadow-md transition-transform duration-300 group-hover:scale-110"
- :class="cap.gradient"
- >
- <IconifyIcon :icon="cap.icon" class="size-5 text-white" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="text-sm font-medium text-gray-800 dark:text-gray-100">
- {{ cap.title }}
- </div>
- <div class="text-xs text-gray-400">{{ cap.desc }}</div>
- </div>
- <IconifyIcon icon="lucide:chevron-right" class="size-4 text-gray-300 transition-transform duration-200 group-hover:translate-x-0.5" />
- </div>
- </div>
- </div>
-</template>
-
-<style scoped>
-.glass-card {
- background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(255,255,255,0.6);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.04),
- 0 1px 4px rgba(0,0,0,0.02),
- inset 0 1px 0 rgba(255,255,255,0.8);
-}
-
-.dark .glass-card {
- background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
- border: 1px solid rgba(255,255,255,0.08);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.3),
- 0 1px 4px rgba(0,0,0,0.2),
- inset 0 1px 0 rgba(255,255,255,0.04);
-}
-</style>
diff --git a/src/views/dashboard/analytics/modules/alert-panel.vue b/src/views/dashboard/analytics/modules/alert-panel.vue
deleted file mode 100644
index 8ac16f2..0000000
--- a/src/views/dashboard/analytics/modules/alert-panel.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script lang="ts" setup>
-import type { MesHomeApi } from '#/api/mes/home';
-import type { EchartsUIType } from '@vben/plugins/echarts';
-
-import { onMounted, ref } from 'vue';
-
-import { CountTo } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-
-import { Spin } from 'ant-design-vue';
-
-import { getWorkOrderStatusDistribution } from '#/api/mes/home';
-
-defineOptions({ name: 'DashboardAlertPanel' });
-
-const props = defineProps<{
- repairActiveCount: number;
-}>();
-
-const emit = defineEmits<{
- navigate: [name: string];
-}>();
-
-const chartRef = ref<EchartsUIType>();
-const { renderEcharts } = useEcharts(chartRef);
-const loading = ref(false);
-
-async function loadStatus() {
- loading.value = true;
- try {
- const data = await getWorkOrderStatusDistribution();
- if (data.length > 0) {
- renderEcharts({
- legend: { bottom: 0, textStyle: { fontSize: 11 } },
- series: [
- {
- animationDuration: 1200,
- animationEasing: 'cubicOut',
- color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444', '#ec4899'],
- data: data.map((d: MesHomeApi.WorkOrderStatus) => ({ name: d.statusName, value: d.count })),
- emphasis: {
- itemStyle: { shadowBlur: 20, shadowColor: 'rgba(0,0,0,0.2)', shadowOffsetX: 0 },
- scaleSize: 8,
- },
- itemStyle: { borderRadius: 6, borderColor: 'transparent', borderWidth: 3 },
- label: { show: false },
- name: '宸ュ崟鐘舵��',
- radius: ['50%', '75%'],
- type: 'pie',
- },
- ],
- tooltip: { trigger: 'item' },
- });
- }
- } finally {
- loading.value = false;
- }
-}
-
-onMounted(() => {
- loadStatus();
-});
-</script>
-
-<template>
- <div class="space-y-4">
- <!-- 棰勮鍗＄墖琛� -->
- <div class="grid grid-cols-1 gap-3">
- <div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0 p-4"
- @click="emit('navigate', 'MesProRepair')"
- >
- <div class="relative z-10 flex items-center gap-3">
- <div class="flex size-10 items-center justify-center rounded-lg bg-amber-50 text-amber-600 shadow-sm dark:bg-amber-500/15 dark:text-amber-400">
- <IconifyIcon class="size-5" icon="lucide:wrench" />
- </div>
- <div>
- <div class="text-xs text-gray-500 dark:text-gray-400">缁翠慨宸ュ崟</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-xl font-bold text-amber-600 dark:text-amber-400" :end-val="repairActiveCount" :duration="1000" />
- <span class="text-xs text-gray-400">寰呭鐞�</span>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 宸ュ崟鐘舵�佸浘 -->
- <div class="glass-tilt rounded-2xl p-5">
- <h4 class="mb-3 text-sm font-semibold text-gray-800 dark:text-gray-100">
- 宸ュ崟鐘舵�佸垎甯�
- </h4>
- <Spin :spinning="loading">
- <EchartsUI ref="chartRef" class="!h-[200px]" />
- </Spin>
- </div>
- </div>
-</template>
-
-<style scoped>
-.glass-tilt {
- background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(255,255,255,0.6);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.04),
- 0 1px 4px rgba(0,0,0,0.02),
- inset 0 1px 0 rgba(255,255,255,0.8);
-}
-
-.dark .glass-tilt {
- background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
- border: 1px solid rgba(255,255,255,0.08);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.3),
- 0 1px 4px rgba(0,0,0,0.2),
- inset 0 1px 0 rgba(255,255,255,0.04);
-}
-</style>
diff --git a/src/views/dashboard/analytics/modules/biz-cards.vue b/src/views/dashboard/analytics/modules/biz-cards.vue
deleted file mode 100644
index 95a9e63..0000000
--- a/src/views/dashboard/analytics/modules/biz-cards.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-
-import { CountTo } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-
-import { Col, Row } from 'ant-design-vue';
-
-import { getPurchaseOrderPage } from '#/api/erp/purchase/order';
-import { getSaleOrderPage } from '#/api/erp/sale/order';
-import { getMaterialStockPage } from '#/api/mes/wm/materialstock';
-import { getTaskTodoPage } from '#/api/bpm/task';
-
-defineOptions({ name: 'DashboardBizCards' });
-
-const emit = defineEmits<{
- navigate: [name: string];
-}>();
-
-const purchaseCount = ref(0);
-const saleCount = ref(0);
-const stockCount = ref(0);
-const bpmTodoCount = ref(0);
-
-async function loadPurchase() {
- try {
- const result = await getPurchaseOrderPage({ pageNo: 1, pageSize: 1 });
- purchaseCount.value = result.total ?? 0;
- } catch { /* 鏃犳潈闄愭垨鎺ュ彛寮傚父 */ }
-}
-
-async function loadSale() {
- try {
- const result = await getSaleOrderPage({ pageNo: 1, pageSize: 1 });
- saleCount.value = result.total ?? 0;
- } catch { /* 鏃犳潈闄愭垨鎺ュ彛寮傚父 */ }
-}
-
-async function loadStock() {
- try {
- const result = await getMaterialStockPage({ pageNo: 1, pageSize: 1 });
- stockCount.value = result.total ?? 0;
- } catch { /* 鏃犳潈闄愭垨鎺ュ彛寮傚父 */ }
-}
-
-async function loadBpmTodo() {
- try {
- const result = await getTaskTodoPage({ pageNo: 1, pageSize: 1 });
- bpmTodoCount.value = result.total ?? 0;
- } catch { /* 鏃犳潈闄愭垨鎺ュ彛寮傚父 */ }
-}
-
-/** 3D 鍊炬枩 */
-interface TiltState { x: number; y: number }
-const tilts = ref<Record<string, TiltState>>({});
-
-function onMouseMove(e: MouseEvent, id: string) {
- const el = e.currentTarget as HTMLElement;
- const rect = el.getBoundingClientRect();
- const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
- const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
- tilts.value[id] = { x: x * -5, y: y * 5 };
-}
-
-function onMouseLeave(id: string) {
- tilts.value[id] = { x: 0, y: 0 };
-}
-
-function tiltStyle(id: string) {
- const t = tilts.value[id] ?? { x: 0, y: 0 };
- return {
- transform: `perspective(500px) rotateX(${t.y}deg) rotateY(${t.x}deg)`,
- transition: t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
- };
-}
-
-onMounted(() => {
- loadPurchase();
- loadSale();
- loadStock();
- loadBpmTodo();
-});
-</script>
-
-<template>
- <Row :gutter="16">
- <!-- 閲囪喘璁㈠崟 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('purchase')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'purchase')"
- @mouseleave="onMouseLeave('purchase')"
- @click="emit('navigate', 'ErpPurchaseOrder')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-teal-400 shadow-lg shadow-cyan-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:shopping-cart" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">閲囪喘璁㈠崟</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-cyan-600 dark:text-cyan-400" :end-val="purchaseCount" :duration="1200" />
- <span class="text-xs text-gray-400">绗�</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">ERP 閲囪喘绠＄悊</div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-cyan-500/5 to-teal-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-cyan-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
-
- <!-- 閿�鍞鍗� -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('sale')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'sale')"
- @mouseleave="onMouseLeave('sale')"
- @click="emit('navigate', 'ErpSaleOrder')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-pink-500 to-rose-400 shadow-lg shadow-pink-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:trending-up" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">閿�鍞鍗�</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-pink-600 dark:text-pink-400" :end-val="saleCount" :duration="1200" />
- <span class="text-xs text-gray-400">绗�</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">ERP 閿�鍞鐞�</div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-pink-500/5 to-rose-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-pink-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
-
- <!-- 鐗╂枡搴撳瓨 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('stock')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'stock')"
- @mouseleave="onMouseLeave('stock')"
- @click="emit('navigate', 'MesWmMaterialStock')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-yellow-400 shadow-lg shadow-amber-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:package-search" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">鐗╂枡搴撳瓨</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-amber-600 dark:text-amber-400" :end-val="stockCount" :duration="1200" />
- <span class="text-xs text-gray-400">鏉�</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">MES 搴撳瓨鍙拌处</div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-amber-500/5 to-yellow-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-amber-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
-
- <!-- BPM 寰呭姙 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('bpm')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'bpm')"
- @mouseleave="onMouseLeave('bpm')"
- @click="emit('navigate', 'BpmTaskTodo')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-red-500 to-rose-400 shadow-lg shadow-red-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:clipboard-check" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">鎴戠殑寰呭姙</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-red-600 dark:text-red-400" :end-val="bpmTodoCount" :duration="1200" />
- <span class="text-xs text-gray-400">椤�</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">BPM 寰呭鎵�</div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-red-500/5 to-rose-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-red-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
- </Row>
-</template>
-
-<style scoped>
-.glass-tilt {
- background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(255,255,255,0.6);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.04),
- 0 1px 4px rgba(0,0,0,0.02),
- inset 0 1px 0 rgba(255,255,255,0.8);
- transform-style: preserve-3d;
-}
-
-.dark .glass-tilt {
- background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
- border: 1px solid rgba(255,255,255,0.08);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.3),
- 0 1px 4px rgba(0,0,0,0.2),
- inset 0 1px 0 rgba(255,255,255,0.04);
-}
-</style>
diff --git a/src/views/dashboard/analytics/modules/kpi-cards.vue b/src/views/dashboard/analytics/modules/kpi-cards.vue
index 761db56..a813bda 100644
--- a/src/views/dashboard/analytics/modules/kpi-cards.vue
+++ b/src/views/dashboard/analytics/modules/kpi-cards.vue
@@ -1,210 +1,251 @@
<script lang="ts" setup>
-import type { MesHomeApi } from '#/api/mes/home';
-
-import { computed, ref } from 'vue';
+import { onMounted, ref } from 'vue';
import { CountTo } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Col, Row } from 'ant-design-vue';
-defineOptions({ name: 'DashboardKpiCards' });
+import { getTaskTodoPage } from '#/api/bpm/task';
+import { getReimbursementPage } from '#/api/finance/reimbursement';
+import { getApplicationPage } from '#/api/research/application';
+import { getGuidelinePage } from '#/api/research/guideline';
-const props = defineProps<{
- summary: MesHomeApi.Summary;
-}>();
+defineOptions({ name: 'DashboardKpiCards' });
const emit = defineEmits<{
navigate: [name: string];
}>();
-const qualityRate = computed(() => {
- const total =
- props.summary.todayQualifiedQuantity +
- props.summary.todayUnqualifiedQuantity;
- return total === 0 ? 0 : (props.summary.todayQualifiedQuantity / total) * 100;
+const todoCount = ref(0);
+const applicationCount = ref(0);
+const reimbursementCount = ref(0);
+const guidelineCount = ref(0);
+
+async function loadTodo() {
+ try {
+ const result = await getTaskTodoPage({ pageNo: 1, pageSize: 1 });
+ todoCount.value = result.total ?? 0;
+ } catch {
+ /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
+ }
+}
+
+async function loadApplication() {
+ try {
+ const result = await getApplicationPage({ pageNo: 1, pageSize: 1 });
+ applicationCount.value = result.total ?? 0;
+ } catch {
+ /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
+ }
+}
+
+async function loadReimbursement() {
+ try {
+ const result = await getReimbursementPage({ pageNo: 1, pageSize: 1 });
+ reimbursementCount.value = result.total ?? 0;
+ } catch {
+ /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
+ }
+}
+
+async function loadGuideline() {
+ try {
+ const result = await getGuidelinePage({ pageNo: 1, pageSize: 1 });
+ guidelineCount.value = result.total ?? 0;
+ } catch {
+ /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
+ }
+}
+
+onMounted(() => {
+ loadTodo();
+ loadApplication();
+ loadReimbursement();
+ loadGuideline();
});
-
-const equipmentRate = computed(() => {
- if (props.summary.machineryTotal === 0) return 0;
- return (props.summary.machineryProducing / props.summary.machineryTotal) * 100;
-});
-
-/** 3D 鍊炬枩鏁堟灉 */
-interface TiltState { x: number; y: number }
-
-const tilts = ref<Record<string, TiltState>>({});
-
-function onMouseMove(e: MouseEvent, id: string) {
- const el = e.currentTarget as HTMLElement;
- const rect = el.getBoundingClientRect();
- const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
- const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
- tilts.value[id] = { x: x * -6, y: y * 6 };
-}
-
-function onMouseLeave(id: string) {
- tilts.value[id] = { x: 0, y: 0 };
-}
-
-function tiltStyle(id: string) {
- const t = tilts.value[id] ?? { x: 0, y: 0 };
- return {
- transform: `perspective(600px) rotateX(${t.y}deg) rotateY(${t.x}deg)`,
- transition: t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
- };
-}
</script>
<template>
<Row :gutter="16">
- <!-- 鐢熶骇璁㈠崟 -->
+ <!-- 鎴戠殑寰呭姙 -->
<Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
<div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('order')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'order')"
- @mouseleave="onMouseLeave('order')"
- @click="emit('navigate', 'MesProWorkOrder')"
+ class="elite-card group cursor-pointer"
+ @click="emit('navigate', 'BpmTaskTodo')"
>
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-cyan-400 shadow-lg shadow-blue-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:clipboard-list" />
+ <div class="flex items-center gap-4 p-5">
+ <div class="elite-icon-tile">
+ <IconifyIcon class="size-6" icon="lucide:list-todo" />
</div>
<div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">鐢熶骇璁㈠崟</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-blue-600 dark:text-blue-400" :end-val="summary.workOrderActiveCount" :duration="1200" />
- <span class="text-xs text-gray-400">杩涜涓�</span>
- </div>
- <div class="mt-1 flex items-center gap-1 text-xs text-gray-400">
- <span class="inline-block size-1.5 rounded-full bg-amber-400" /> 寰呮帓浜� {{ summary.workOrderPrepareCount }}
- <span class="mx-1">|</span>
- <span class="inline-block size-1.5 rounded-full bg-emerald-400" /> 宸插畬鎴� {{ summary.workOrderFinishedCount }}
- </div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-blue-500/5 to-cyan-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-blue-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
-
- <!-- 浠婃棩浜ч噺 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('output')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'output')"
- @mouseleave="onMouseLeave('output')"
- @click="emit('navigate', 'MesProFeedback')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-green-400 shadow-lg shadow-emerald-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:trending-up" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">浠婃棩浜ч噺</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-emerald-600 dark:text-emerald-400" :end-val="summary.todayOutput" :duration="1200" />
- <span class="text-xs text-gray-400">浠�</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">
- 鏄ㄦ棩 {{ summary.yesterdayOutput }} 浠�
- <span v-if="summary.yesterdayOutput > 0 && summary.todayOutput >= summary.yesterdayOutput" class="text-emerald-500">鈫�</span>
- <span v-else-if="summary.yesterdayOutput > 0" class="text-red-500">鈫�</span>
- </div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-emerald-500/5 to-green-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-emerald-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
-
- <!-- 璐ㄩ噺鍚堟牸鐜� -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('quality')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'quality')"
- @mouseleave="onMouseLeave('quality')"
- @click="emit('navigate', 'MesQcRecord')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500 to-amber-400 shadow-lg shadow-orange-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:shield-check" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">璐ㄩ噺鍚堟牸鐜�</div>
+ <div class="elite-label">鎴戠殑寰呭姙</div>
<div class="flex items-baseline gap-1">
<CountTo
- class="text-2xl font-bold leading-tight"
- :class="qualityRate >= 95 ? 'text-emerald-600 dark:text-emerald-400' : qualityRate >= 80 ? 'text-orange-600 dark:text-orange-400' : 'text-red-600 dark:text-red-400'"
- :decimals="1" :end-val="qualityRate" :duration="1200"
+ class="elite-value"
+ :class="todoCount > 0 ? 'text-[#b8901f] dark:text-[#e3c567]' : ''"
+ :duration="1200"
+ :end-val="todoCount"
/>
- <span class="text-xs text-gray-400">%</span>
+ <span class="elite-unit">椤�</span>
</div>
- <div class="mt-1 text-xs text-gray-400">
- 鍚堟牸 {{ summary.todayQualifiedQuantity }} | 涓嶈壇 {{ summary.todayUnqualifiedQuantity }}
- </div>
+ <div class="elite-meta">瀹℃壒涓績 路 寰呭鐞嗕换鍔�</div>
</div>
</div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-orange-500/5 to-amber-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-orange-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
</div>
</Col>
- <!-- 璁惧杩愯鐜� -->
+ <!-- 璇鹃鐢虫姤 -->
<Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
<div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('equip')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'equip')"
- @mouseleave="onMouseLeave('equip')"
- @click="emit('navigate', 'MesDvMachinery')"
+ class="elite-card group cursor-pointer"
+ @click="emit('navigate', 'ResearchApplication')"
>
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-purple-400 shadow-lg shadow-violet-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:cpu" />
+ <div class="flex items-center gap-4 p-5">
+ <div class="elite-icon-tile">
+ <IconifyIcon class="size-6" icon="lucide:file-text" />
</div>
<div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">璁惧杩愯鐜�</div>
+ <div class="elite-label">璇鹃鐢虫姤</div>
<div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-violet-600 dark:text-violet-400" :decimals="1" :end-val="equipmentRate" :duration="1200" />
- <span class="text-xs text-gray-400">%</span>
+ <CountTo
+ class="elite-value"
+ :duration="1200"
+ :end-val="applicationCount"
+ />
+ <span class="elite-unit">椤�</span>
</div>
- <div class="mt-1 flex items-center gap-1 text-xs text-gray-400">
- <span class="text-red-400">鍋滄満 {{ summary.machineryStop }}</span>
- <span class="mx-1">|</span>
- <span class="text-amber-400">缁存姢 {{ summary.machineryMaintenance }}</span>
- </div>
+ <div class="elite-meta">璇鹃绠＄悊 路 鐢虫姤涔�</div>
</div>
</div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-violet-500/5 to-purple-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-violet-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
+ </div>
+ </Col>
+
+ <!-- 璐㈠姟鎶ラ攢 -->
+ <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
+ <div
+ class="elite-card group cursor-pointer"
+ @click="emit('navigate', 'FinanceReimbursement')"
+ >
+ <div class="flex items-center gap-4 p-5">
+ <div class="elite-icon-tile">
+ <IconifyIcon class="size-6" icon="lucide:receipt" />
+ </div>
+ <div class="min-w-0 flex-1">
+ <div class="elite-label">璐㈠姟鎶ラ攢</div>
+ <div class="flex items-baseline gap-1">
+ <CountTo
+ class="elite-value"
+ :duration="1200"
+ :end-val="reimbursementCount"
+ />
+ <span class="elite-unit">鍗�</span>
+ </div>
+ <div class="elite-meta">璐㈠姟鎶ラ攢 路 鎶ラ攢鍗�</div>
+ </div>
+ </div>
+ </div>
+ </Col>
+
+ <!-- 璇鹃鎸囧崡 -->
+ <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
+ <div
+ class="elite-card group cursor-pointer"
+ @click="emit('navigate', 'ResearchGuideline')"
+ >
+ <div class="flex items-center gap-4 p-5">
+ <div class="elite-icon-tile">
+ <IconifyIcon class="size-6" icon="lucide:book-open" />
+ </div>
+ <div class="min-w-0 flex-1">
+ <div class="elite-label">璇鹃鎸囧崡</div>
+ <div class="flex items-baseline gap-1">
+ <CountTo
+ class="elite-value"
+ :duration="1200"
+ :end-val="guidelineCount"
+ />
+ <span class="elite-unit">浠�</span>
+ </div>
+ <div class="elite-meta">璇鹃绠＄悊 路 鐢虫姤鎸囧崡</div>
+ </div>
+ </div>
</div>
</Col>
</Row>
</template>
<style scoped>
-.glass-tilt {
- background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(255,255,255,0.6);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.04),
- 0 1px 4px rgba(0,0,0,0.02),
- inset 0 1px 0 rgba(255,255,255,0.8);
- transform-style: preserve-3d;
+/* ===== 瀛︽湳鍏搁泤鍗＄墖 ===== */
+.elite-card {
+ background: #fdfcfa;
+ border: 1px solid rgba(212, 175, 55, 0.22);
+ border-radius: 14px;
+ box-shadow: 0 2px 14px rgba(15, 36, 64, 0.05);
+ transition:
+ border-color 0.3s ease,
+ box-shadow 0.3s ease;
}
-.dark .glass-tilt {
- background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
- border: 1px solid rgba(255,255,255,0.08);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.3),
- 0 1px 4px rgba(0,0,0,0.2),
- inset 0 1px 0 rgba(255,255,255,0.04);
+.elite-card:hover {
+ border-color: rgba(212, 175, 55, 0.5);
+ box-shadow: 0 6px 20px rgba(15, 36, 64, 0.09);
+}
+
+.dark .elite-card {
+ background: #101a2b;
+ border-color: rgba(212, 175, 55, 0.2);
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
+}
+
+/* 鍥炬爣搴曪細钘忛潚娓愬彉 + 閲戣壊鍥炬爣 */
+.elite-icon-tile {
+ display: flex;
+ width: 48px;
+ height: 48px;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ border-radius: 12px;
+ color: #e3c567;
+ background: linear-gradient(135deg, #1e4571, #0f2440);
+ border: 1px solid rgba(212, 175, 55, 0.3);
+ box-shadow: 0 4px 12px rgba(15, 36, 64, 0.18);
+ transition: border-color 0.3s ease;
+}
+
+/* 鎮仠鍙閲戣壊鎻忚竟寰井鎻愪寒锛屼笉鍋氱缉鏀� */
+.group:hover .elite-icon-tile {
+ border-color: rgba(212, 175, 55, 0.6);
+}
+
+.elite-label {
+ margin-bottom: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: 1px;
+ color: #8a94a6;
+}
+
+.elite-value {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1.2;
+ color: #0f2440;
+}
+
+.dark .elite-value {
+ color: #e3c567;
+}
+
+.elite-unit {
+ font-size: 12px;
+ color: #8a94a6;
+}
+
+.elite-meta {
+ margin-top: 4px;
+ font-size: 12px;
+ color: #8a94a6;
}
</style>
diff --git a/src/views/dashboard/analytics/modules/production-trend.vue b/src/views/dashboard/analytics/modules/production-trend.vue
deleted file mode 100644
index e6ad064..0000000
--- a/src/views/dashboard/analytics/modules/production-trend.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts" setup>
-import type { MesHomeApi } from '#/api/mes/home';
-import type { EchartsUIType } from '@vben/plugins/echarts';
-
-import { onMounted, ref, watch } from 'vue';
-
-import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-
-import { getProductionTrend } from '#/api/mes/home';
-
-defineOptions({ name: 'DashboardProductionTrend' });
-
-const chartRef = ref<EchartsUIType>();
-const { renderEcharts } = useEcharts(chartRef);
-
-async function loadTrend() {
- const data = await getProductionTrend(7);
- const dates = data.map((d: MesHomeApi.ProductionTrend) => d.date.slice(5));
- const quantities = data.map((d: MesHomeApi.ProductionTrend) => d.quantity);
- const qualified = data.map((d: MesHomeApi.ProductionTrend) => d.qualifiedQuantity);
- const unqualified = data.map((d: MesHomeApi.ProductionTrend) => d.unqualifiedQuantity);
-
- renderEcharts({
- grid: { bottom: 30, containLabel: true, left: 10, right: 30, top: 30 },
- legend: { bottom: 0, data: ['浜ч噺', '鍚堟牸鍝�', '涓嶈壇鍝�'], textStyle: { fontSize: 12 } },
- tooltip: { trigger: 'axis' },
- xAxis: {
- axisTick: { show: false },
- boundaryGap: false,
- data: dates,
- type: 'category',
- },
- yAxis: {
- axisTick: { show: false },
- splitNumber: 4,
- type: 'value',
- },
- series: [
- {
- barMaxWidth: 32,
- data: quantities,
- itemStyle: {
- borderRadius: 4,
- color: '#2563eb',
- },
- name: '浜ч噺',
- type: 'bar',
- },
- {
- data: qualified,
- itemStyle: { color: '#16a34a' },
- name: '鍚堟牸鍝�',
- smooth: true,
- symbol: 'circle',
- symbolSize: 6,
- type: 'line',
- },
- {
- data: unqualified,
- itemStyle: { color: '#dc2626' },
- name: '涓嶈壇鍝�',
- smooth: true,
- symbol: 'diamond',
- symbolSize: 6,
- type: 'line',
- },
- ],
- });
-}
-
-onMounted(() => {
- loadTrend();
-});
-</script>
-
-<template>
- <EchartsUI ref="chartRef" class="!h-[320px]" />
-</template>
diff --git a/src/views/dashboard/analytics/modules/quick-actions.vue b/src/views/dashboard/analytics/modules/quick-actions.vue
index 9a825b5..ea58f12 100644
--- a/src/views/dashboard/analytics/modules/quick-actions.vue
+++ b/src/views/dashboard/analytics/modules/quick-actions.vue
@@ -11,62 +11,125 @@
title: string;
icon: string;
route: string;
- gradient: string;
- shadow: string;
}
+/** 蹇嵎鍏ュ彛锛氬搴旂郴缁熷疄闄呰彍鍗曪紙瀹℃壒涓績 / 璇鹃绠＄悊 / 璐㈠姟鎶ラ攢 / 閫氱煡鍏憡锛� */
const actions: QuickAction[] = [
- { title: '鐢熶骇宸ュ崟', icon: 'lucide:file-text', route: 'MesProWorkOrder', gradient: 'from-blue-500 to-cyan-500', shadow: 'shadow-blue-500/15' },
- { title: '鐢熶骇鎶ュ伐', icon: 'lucide:check-square', route: 'MesProFeedback', gradient: 'from-emerald-500 to-green-500', shadow: 'shadow-emerald-500/15' },
- { title: '璐ㄦ绠＄悊', icon: 'lucide:clipboard-check', route: 'MesQcRecord', gradient: 'from-orange-500 to-amber-500', shadow: 'shadow-orange-500/15' },
- { title: '璁惧鐐规', icon: 'lucide:settings', route: 'MesDvMachinery', gradient: 'from-violet-500 to-purple-500', shadow: 'shadow-violet-500/15' },
- { title: '鐢熶骇鎺掔▼', icon: 'lucide:calendar-range', route: 'MesProScheduling', gradient: 'from-cyan-500 to-teal-500', shadow: 'shadow-cyan-500/15' },
- { title: '鐗╂枡搴撳瓨', icon: 'lucide:package-search', route: 'WlsMaterialStock', gradient: 'from-indigo-500 to-blue-500', shadow: 'shadow-indigo-500/15' },
- { title: '宸ヨ壓璺嚎', icon: 'lucide:route', route: 'MesPdRouting', gradient: 'from-teal-500 to-emerald-500', shadow: 'shadow-teal-500/15' },
- { title: '鏁版嵁鎶ヨ〃', icon: 'lucide:bar-chart-big', route: 'MesHomeIndex', gradient: 'from-pink-500 to-rose-500', shadow: 'shadow-pink-500/15' },
+ { title: '鍙戣捣娴佺▼', icon: 'lucide:circle-plus', route: 'BpmProcessInstanceCreate' },
+ { title: '寰呭姙浠诲姟', icon: 'lucide:list-todo', route: 'BpmTaskTodo' },
+ { title: '宸插姙浠诲姟', icon: 'lucide:circle-check-big', route: 'BpmTaskDone' },
+ { title: '鎴戠殑娴佺▼', icon: 'lucide:git-branch', route: 'BpmProcessInstance' },
+ { title: '璇鹃鐢虫姤', icon: 'lucide:file-text', route: 'ResearchApplication' },
+ { title: '璇鹃鎸囧崡', icon: 'lucide:book-open', route: 'ResearchGuideline' },
+ { title: '璐㈠姟鎶ラ攢', icon: 'lucide:receipt', route: 'FinanceReimbursement' },
+ { title: '閫氱煡鍏憡', icon: 'lucide:bell', route: 'BpmOaNotice' },
];
</script>
<template>
- <div class="glass-card rounded-2xl p-5">
- <h3 class="mb-4 text-sm font-semibold text-gray-800 dark:text-gray-100">蹇嵎鎿嶄綔</h3>
- <div class="grid grid-cols-4 gap-3 sm:grid-cols-8">
+ <div class="elite-card p-5">
+ <div class="elite-head">
+ <h3 class="elite-title">
+ <span class="elite-bar"></span>
+ 蹇嵎鍏ュ彛
+ </h3>
+ </div>
+ <div class="grid grid-cols-4 gap-3">
<div
v-for="action in actions"
:key="action.route"
- class="group flex cursor-pointer flex-col items-center gap-2 rounded-xl p-3 transition-all duration-300 hover:-translate-y-1"
+ class="elite-action group flex cursor-pointer flex-col items-center gap-2 rounded-xl p-3 transition-colors duration-300"
@click="emit('navigate', action.route)"
>
<div
- class="flex size-10 items-center justify-center rounded-xl bg-gradient-to-br transition-shadow duration-300 group-hover:shadow-lg"
- :class="[action.gradient, action.shadow]"
+ class="elite-icon flex size-10 items-center justify-center rounded-xl transition-shadow duration-300"
>
- <IconifyIcon :icon="action.icon" class="size-5 text-white" />
+ <IconifyIcon :icon="action.icon" class="size-5 text-[#e3c567]" />
</div>
- <span class="text-xs font-medium text-gray-600 dark:text-gray-400">{{ action.title }}</span>
+ <span class="elite-action-label">{{ action.title }}</span>
</div>
</div>
</div>
</template>
<style scoped>
-.glass-card {
- background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(255,255,255,0.6);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.04),
- 0 1px 4px rgba(0,0,0,0.02),
- inset 0 1px 0 rgba(255,255,255,0.8);
+.elite-card {
+ background: #fdfcfa;
+ border: 1px solid rgba(212, 175, 55, 0.22);
+ border-radius: 14px;
+ box-shadow: 0 2px 14px rgba(15, 36, 64, 0.05);
+ transition:
+ border-color 0.3s ease,
+ box-shadow 0.3s ease;
}
-.dark .glass-card {
- background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
- border: 1px solid rgba(255,255,255,0.08);
+.elite-card:hover {
+ border-color: rgba(212, 175, 55, 0.5);
+ box-shadow: 0 6px 20px rgba(15, 36, 64, 0.09);
+}
+
+.dark .elite-card {
+ background: #101a2b;
+ border-color: rgba(212, 175, 55, 0.2);
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
+}
+
+.elite-head {
+ display: flex;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.elite-title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin: 0;
+ font-size: 15px;
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #0f2440;
+}
+
+.dark .elite-title {
+ color: #f0ead8;
+}
+
+.elite-bar {
+ display: inline-block;
+ width: 3px;
+ height: 15px;
+ border-radius: 2px;
+ background: linear-gradient(180deg, #e3c567, #b8901f);
+}
+
+/* 鍥炬爣搴曪細钘忛潚娓愬彉 + 閲戣壊鍥炬爣 */
+.elite-icon {
+ color: #e3c567;
+ background: linear-gradient(135deg, #1e4571, #0f2440);
+ border: 1px solid rgba(212, 175, 55, 0.3);
+ box-shadow: 0 4px 12px rgba(15, 36, 64, 0.18);
+}
+
+/* 鎮仠鍙彁浜噾鑹叉弿杈癸紝涓嶅仛浣嶇Щ */
+.elite-action:hover .elite-icon {
box-shadow:
- 0 4px 24px rgba(0,0,0,0.3),
- 0 1px 4px rgba(0,0,0,0.2),
- inset 0 1px 0 rgba(255,255,255,0.04);
+ 0 0 0 1px rgba(212, 175, 55, 0.7),
+ 0 4px 14px rgba(15, 36, 64, 0.22);
+}
+
+.elite-action-label {
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ color: #8a94a6;
+}
+
+.elite-action:hover .elite-action-label {
+ color: #b8901f;
+}
+
+.dark .elite-action:hover .elite-action-label {
+ color: #e3c567;
}
</style>
diff --git a/src/views/dashboard/analytics/modules/recent-applications.vue b/src/views/dashboard/analytics/modules/recent-applications.vue
new file mode 100644
index 0000000..3e6ff61
--- /dev/null
+++ b/src/views/dashboard/analytics/modules/recent-applications.vue
@@ -0,0 +1,272 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { getApplicationPage } from '#/api/research/application';
+
+defineOptions({ name: 'DashboardRecentApplications' });
+
+const emit = defineEmits<{
+ navigate: [name: string];
+}>();
+
+interface Row {
+ id?: number;
+ no?: string;
+ title: string;
+ applicantName: string;
+ status?: number;
+ createTime?: string;
+}
+
+/** 鐘舵�佺爜 鈫� 灞曠ず鏂囨涓庨厤鑹诧紝涓� research_application_status 瀛楀吀淇濇寔涓�鑷� */
+const STATUS_MAP: Record<number, { text: string; tone: string }> = {
+ 0: { text: '鑽夌', tone: 'gray' },
+ 15: { text: '瀹℃壒涓�', tone: 'gold' },
+ 20: { text: '宸茬珛椤�', tone: 'green' },
+ 35: { text: '宸查┏鍥�', tone: 'red' },
+};
+
+function statusOf(code?: number) {
+ if (code === undefined || code === null) {
+ return { text: '鈥�', tone: 'gray' };
+ }
+ return STATUS_MAP[code] ?? { text: String(code), tone: 'gray' };
+}
+
+const loading = ref(true);
+const rows = ref<Row[]>([]);
+
+async function load() {
+ loading.value = true;
+ try {
+ const result = await getApplicationPage({ pageNo: 1, pageSize: 6 });
+ rows.value = (result.list ?? []) as Row[];
+ } catch {
+ rows.value = [];
+ } finally {
+ loading.value = false;
+ }
+}
+
+onMounted(load);
+</script>
+
+<template>
+ <div class="elite-section">
+ <div class="elite-head">
+ <h3 class="elite-title">
+ <span class="elite-bar"></span>
+ 鏈�杩戣棰樼敵鎶�
+ </h3>
+ <span class="elite-more" @click="emit('navigate', 'ResearchApplication')">
+ 鍏ㄩ儴
+ <IconifyIcon class="size-3.5" icon="lucide:chevron-right" />
+ </span>
+ </div>
+
+ <div v-if="loading" class="elite-empty">鍔犺浇涓��</div>
+
+ <div v-else-if="rows.length === 0" class="elite-empty">
+ <IconifyIcon class="mb-2 size-8 opacity-40" icon="lucide:file-text" />
+ <div>鏆傛棤璇鹃鐢虫姤璁板綍</div>
+ </div>
+
+ <table v-else class="elite-table">
+ <thead>
+ <tr>
+ <th class="col-title">璇鹃鍚嶇О</th>
+ <th class="col-applicant">鐢虫姤浜�</th>
+ <th class="col-status">鐘舵��</th>
+ <th class="col-time">鐢虫姤鏃堕棿</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr
+ v-for="row in rows"
+ :key="row.id ?? row.no"
+ @click="emit('navigate', 'ResearchApplication')"
+ >
+ <td class="col-title">
+ <span class="elite-ellipsis">{{ row.title }}</span>
+ </td>
+ <td class="col-applicant">{{ row.applicantName || '鈥�' }}</td>
+ <td class="col-status">
+ <span class="elite-chip" :class="`tone-${statusOf(row.status).tone}`">
+ {{ statusOf(row.status).text }}
+ </span>
+ </td>
+ <td class="col-time">{{ row.createTime || '鈥�' }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+</template>
+
+<style scoped>
+.elite-section {
+ border-radius: 14px;
+ padding: 20px;
+ background: #fdfcfa;
+ border: 1px solid rgba(212, 175, 55, 0.22);
+ box-shadow: 0 2px 14px rgba(15, 36, 64, 0.05);
+}
+
+.dark .elite-section {
+ background: #101a2b;
+ border-color: rgba(212, 175, 55, 0.2);
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
+}
+
+.elite-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 14px;
+}
+
+.elite-title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin: 0;
+ font-size: 15px;
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #0f2440;
+}
+
+.dark .elite-title {
+ color: #f0ead8;
+}
+
+.elite-bar {
+ display: inline-block;
+ width: 3px;
+ height: 15px;
+ border-radius: 2px;
+ background: linear-gradient(180deg, #e3c567, #b8901f);
+}
+
+.elite-more {
+ display: inline-flex;
+ cursor: pointer;
+ align-items: center;
+ gap: 2px;
+ font-size: 12px;
+ color: #b8901f;
+ transition: color 0.2s ease;
+}
+
+.elite-more:hover {
+ color: #8a6a12;
+}
+
+.elite-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 34px 0;
+ font-size: 13px;
+ color: #8a94a6;
+}
+
+.elite-table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+}
+
+.elite-table th {
+ padding: 0 8px 10px;
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: 1px;
+ color: #8a94a6;
+ text-align: left;
+ border-bottom: 1px solid rgba(15, 36, 64, 0.08);
+}
+
+.elite-table td {
+ padding: 12px 8px;
+ font-size: 13.5px;
+ color: #0f2440;
+ border-bottom: 1px solid rgba(15, 36, 64, 0.05);
+}
+
+.dark .elite-table td {
+ color: #e6e9ef;
+}
+
+.elite-table tbody tr {
+ cursor: pointer;
+ transition: background-color 0.2s ease;
+}
+
+.elite-table tbody tr:hover {
+ background: rgba(212, 175, 55, 0.07);
+}
+
+.elite-table tbody tr:last-child td {
+ border-bottom: none;
+}
+
+.col-title {
+ width: 44%;
+}
+
+.col-applicant {
+ width: 18%;
+}
+
+.col-status {
+ width: 16%;
+}
+
+.col-time {
+ width: 22%;
+ color: #8a94a6;
+}
+
+.elite-ellipsis {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* 鐘舵�佹爣绛撅細閲�/缁�/绾�/鐏板洓妗� */
+.elite-chip {
+ display: inline-block;
+ padding: 2px 10px;
+ font-size: 12px;
+ border-radius: 999px;
+ border: 1px solid transparent;
+}
+
+.tone-gold {
+ color: #b8901f;
+ background: rgba(212, 175, 55, 0.1);
+ border-color: rgba(212, 175, 55, 0.35);
+}
+
+.tone-green {
+ color: #2f6b4f;
+ background: rgba(47, 107, 79, 0.1);
+ border-color: rgba(47, 107, 79, 0.3);
+}
+
+.tone-red {
+ color: #b4453c;
+ background: rgba(180, 69, 60, 0.1);
+ border-color: rgba(180, 69, 60, 0.3);
+}
+
+.tone-gray {
+ color: #8a94a6;
+ background: rgba(138, 148, 166, 0.1);
+ border-color: rgba(138, 148, 166, 0.28);
+}
+</style>
diff --git a/src/views/dashboard/analytics/modules/todo-panel.vue b/src/views/dashboard/analytics/modules/todo-panel.vue
new file mode 100644
index 0000000..916b434
--- /dev/null
+++ b/src/views/dashboard/analytics/modules/todo-panel.vue
@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { getTaskTodoPage } from '#/api/bpm/task';
+
+defineOptions({ name: 'DashboardTodoPanel' });
+
+const emit = defineEmits<{
+ navigate: [name: string];
+}>();
+
+interface TodoItem {
+ id: string;
+ name: string;
+ createTime?: number;
+}
+
+const loading = ref(true);
+const items = ref<TodoItem[]>([]);
+
+/** createTime 涓烘绉掓椂闂存埑锛屾牸寮忓寲鎴愭槗璇绘枃鏈� */
+function formatTime(ts?: number) {
+ if (!ts) return '-';
+ const d = new Date(ts);
+ const p = (n: number) => String(n).padStart(2, '0');
+ return `${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+async function load() {
+ loading.value = true;
+ try {
+ const result = await getTaskTodoPage({ pageNo: 1, pageSize: 6 });
+ items.value = (result.list ?? []).map((t: any) => ({
+ id: String(t.id),
+ name: t.name ?? '鏈懡鍚嶄换鍔�',
+ createTime: t.createTime,
+ }));
+ } catch {
+ items.value = [];
+ } finally {
+ loading.value = false;
+ }
+}
+
+onMounted(load);
+</script>
+
+<template>
+ <div class="elite-section h-full">
+ <div class="elite-head">
+ <h3 class="elite-title">
+ <span class="elite-bar"></span>
+ 鎴戠殑寰呭姙
+ </h3>
+ <span class="elite-more" @click="emit('navigate', 'BpmTaskTodo')">
+ 鍏ㄩ儴
+ <IconifyIcon class="size-3.5" icon="lucide:chevron-right" />
+ </span>
+ </div>
+
+ <!-- 楠ㄦ灦 -->
+ <div v-if="loading" class="elite-empty">鍔犺浇涓��</div>
+
+ <!-- 绌虹姸鎬� -->
+ <div v-else-if="items.length === 0" class="elite-empty">
+ <IconifyIcon class="mb-2 size-8 opacity-40" icon="lucide:inbox" />
+ <div>鏆傛棤寰呭姙浠诲姟</div>
+ </div>
+
+ <!-- 鍒楄〃 -->
+ <ul v-else class="elite-list">
+ <li
+ v-for="item in items"
+ :key="item.id"
+ class="elite-row"
+ @click="emit('navigate', 'BpmTaskTodo')"
+ >
+ <span class="elite-dot"></span>
+ <span class="elite-row-name">{{ item.name }}</span>
+ <span class="elite-row-time">{{ formatTime(item.createTime) }}</span>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<style scoped>
+.elite-section {
+ border-radius: 14px;
+ padding: 20px;
+ background: #fdfcfa;
+ border: 1px solid rgba(212, 175, 55, 0.22);
+ box-shadow: 0 2px 14px rgba(15, 36, 64, 0.05);
+}
+
+.dark .elite-section {
+ background: #101a2b;
+ border-color: rgba(212, 175, 55, 0.2);
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
+}
+
+.elite-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 14px;
+}
+
+.elite-title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin: 0;
+ font-size: 15px;
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #0f2440;
+}
+
+.dark .elite-title {
+ color: #f0ead8;
+}
+
+.elite-bar {
+ display: inline-block;
+ width: 3px;
+ height: 15px;
+ border-radius: 2px;
+ background: linear-gradient(180deg, #e3c567, #b8901f);
+}
+
+.elite-more {
+ display: inline-flex;
+ cursor: pointer;
+ align-items: center;
+ gap: 2px;
+ font-size: 12px;
+ color: #b8901f;
+ transition: color 0.2s ease;
+}
+
+.elite-more:hover {
+ color: #8a6a12;
+}
+
+.elite-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 34px 0;
+ font-size: 13px;
+ color: #8a94a6;
+}
+
+.elite-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.elite-row {
+ display: flex;
+ cursor: pointer;
+ align-items: center;
+ gap: 10px;
+ padding: 11px 10px;
+ border-radius: 8px;
+ border-bottom: 1px solid rgba(15, 36, 64, 0.05);
+ transition: background-color 0.2s ease;
+}
+
+.elite-row:last-child {
+ border-bottom: none;
+}
+
+.elite-row:hover {
+ background: rgba(212, 175, 55, 0.07);
+}
+
+.elite-dot {
+ width: 6px;
+ height: 6px;
+ flex-shrink: 0;
+ border-radius: 999px;
+ background: #d4af37;
+}
+
+.elite-row-name {
+ overflow: hidden;
+ flex: 1;
+ font-size: 13.5px;
+ color: #0f2440;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.dark .elite-row-name {
+ color: #e6e9ef;
+}
+
+.elite-row-time {
+ flex-shrink: 0;
+ font-size: 12px;
+ color: #8a94a6;
+}
+</style>
--
Gitblit v1.9.3