样式

src/views/flow/index.vue

@@ -96,11 +96,22 @@
             v-for="item in activeTab.flowRespVOS"
             :key="item.id"
             class="item-card"
+            :style="{
+              '--item-accent': getIconTheme(item).color,
+              '--item-accent-soft': getIconTheme(item).softColor,
+              '--item-accent-hover': getIconTheme(item).hoverColor,
+            }"
             @click="go(item)"
           >
             <div class="item-top">
-              <div class="item-icon">
-                <Icon :icon="item.icon || 'mdi:file-document-outline'" />
+              <div
+                class="item-icon"
+                :style="{ backgroundColor: getIconTheme(item).softColor }"
+              >
+                <Icon
+                  :icon="item.icon || 'mdi:file-document-outline'"
+                  :color="getIconTheme(item).color"
+                />
               </div>
 
               <div>
@@ -351,6 +362,60 @@ const tabs = ref([]);
 
 const activeKey = ref("all");
 
+const iconPalette = [
+  {
+    color: "#2563eb",
+    softColor: "rgba(37, 99, 235, 0.12)",
+    hoverColor: "rgba(37, 99, 235, 0.18)",
+  },
+  {
+    color: "#db2777",
+    softColor: "rgba(219, 39, 119, 0.12)",
+    hoverColor: "rgba(219, 39, 119, 0.18)",
+  },
+  {
+    color: "#ea580c",
+    softColor: "rgba(234, 88, 12, 0.12)",
+    hoverColor: "rgba(234, 88, 12, 0.18)",
+  },
+  {
+    color: "#059669",
+    softColor: "rgba(5, 150, 105, 0.12)",
+    hoverColor: "rgba(5, 150, 105, 0.18)",
+  },
+  {
+    color: "#7c3aed",
+    softColor: "rgba(124, 58, 237, 0.12)",
+    hoverColor: "rgba(124, 58, 237, 0.18)",
+  },
+  {
+    color: "#0f766e",
+    softColor: "rgba(15, 118, 110, 0.12)",
+    hoverColor: "rgba(15, 118, 110, 0.18)",
+  },
+  {
+    color: "#dc2626",
+    softColor: "rgba(220, 38, 38, 0.12)",
+    hoverColor: "rgba(220, 38, 38, 0.18)",
+  },
+  {
+    color: "#ca8a04",
+    softColor: "rgba(202, 138, 4, 0.12)",
+    hoverColor: "rgba(202, 138, 4, 0.18)",
+  },
+];
+
+const hashText = (text = "") =>
+  String(text)
+    .split("")
+    .reduce((hash, char) => hash * 31 + char.charCodeAt(0), 0);
+
+const getIconTheme = (item) => {
+  const seed = item?.id ?? item?.flowName ?? item?.type ?? "";
+  const index = Math.abs(hashText(seed)) % iconPalette.length;
+  return iconPalette[index];
+};
+
 const allTab = computed(() => {
   const flowRespVOS = tabs.value.flatMap((tab) => tab.flowRespVOS || []);
   return {
@@ -801,6 +866,9 @@ onBeforeUnmount(() => {
 }
 
 .item-card {
+  --item-accent: #2563eb;
+  --item-accent-soft: rgba(37, 99, 235, 0.12);
+  --item-accent-hover: rgba(37, 99, 235, 0.18);
   display: flex;
   flex-direction: column;
   gap: 18px;
@@ -815,14 +883,14 @@ onBeforeUnmount(() => {
   transition:
     transform 0.2s ease,
     border-color 0.2s ease,
-    box-shadow 0.2s ease;
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
   cursor: pointer;
   border-bottom: 1px solid rgb(241, 245, 249);
 }
 
 .item-card:hover {
   transform: translateY(-3px);
-
   box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
   color: #02409b !important;
 }
@@ -843,16 +911,30 @@ onBeforeUnmount(() => {
   width: 52px;
   height: 52px;
   border-radius: 16px;
-  background: #f5f7fb;
+
   display: grid;
   place-items: center;
-
   font-size: 20px;
+  transition:
+    transform 0.2s ease,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .item-icon :deep(svg) {
   width: 24px;
   height: 24px;
+  transition: color 0.2s ease;
+}
+
+.item-card:hover .item-icon {
+  background: var(--item-accent) !important;
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px -12px var(--item-accent);
+}
+
+.item-card:hover .item-icon :deep(svg) {
+  color: #ffffff !important;
 }
 
 .item-role {

src/views/login.vue

@@ -21,7 +21,7 @@
         <h1 class="text-2xl font-bold text-center">登录</h1>
 
         <!-- 用户名密码登陆 -->
-        <!-- <div>
+        <div>
           <el-form
             :model="form"
             :rules="rules"
@@ -62,7 +62,7 @@
               >
             </div>
           </div>
-        </div> -->
+        </div>
 
         <!-- 钉钉登陆 -->
         <div class="text-center">