From c405328da79f8bf07a1d46a9d0f7b843842fc41f Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 29 May 2026 20:11:11 +0800
Subject: [PATCH] refactor(shared-visual): clean up shared styles

Remove the centralized SharedVisual/styles/index.scss file. Inline all component styles directly into each Vue component. Hardcode green default styles for BadgePill and ActionRow, remove dynamic tone classes. Replace the text arrow in ActionRow with the van-icon component. Update disabled states to use opacity-55 instead of is-disabled class. Fix font-700 to font-bold across components. Simplify component class names and remove unused code.
---
 .../components/LongTextGuideCard/index.vue    |   6 +-
 .../components/SharedVisual/ActionRow.vue     |  24 ++--
 .../components/SharedVisual/BadgePill.vue     |  10 +-
 .../components/SharedVisual/CardShell.vue     |  15 ++-
 .../components/SharedVisual/styles/index.scss | 104 ------------------
 5 files changed, 25 insertions(+), 134 deletions(-)
 delete mode 100644 src/pages/home/components/SharedVisual/styles/index.scss

diff --git a/src/pages/home/components/LongTextGuideCard/index.vue b/src/pages/home/components/LongTextGuideCard/index.vue
index d2b0394..0eca263 100644
--- a/src/pages/home/components/LongTextGuideCard/index.vue
+++ b/src/pages/home/components/LongTextGuideCard/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="long-text-guide-card w-full">
-    <div v-if="mode === 'list'" class="long-text-guide-card__list w-full">
+  <div class="w-full">
+    <div v-if="mode === 'list'" class="w-full">
       <div v-for="item in cards" :key="item.id"
         class="min-h-[178px] mb-4 pt-[28px] px-[26px] pb-[22px] border border-slate-900/5 [box-shadow:0_12px_28px_rgba(15,23,42,0.04)] [transition:transform_0.15s_ease,opacity_0.15s_ease] bg-white rounded-[24px] active:scale-985"
         :class="{ 'opacity-55': disabled }" @click="openDetail(item)">
@@ -24,7 +24,7 @@
     <div v-else class="border border-slate-900/5 bg-white rounded-[24px] overflow-hidden">
       <div class="min-h-[70px] py-0 pr-[18px] pl-5 flex items-center border-b border-ink-200">
         <div
-          class="w-[34px] h-[34px] mr-3 text-slate-500 bg-[#f2f4f6] text-2xl leading-none flex items-center justify-center rounded-full font-700"
+          class="w-[34px] h-[34px] mr-3 text-slate-500 bg-[#f2f4f6] text-2xl leading-none flex items-center justify-center rounded-full font-bold"
           @click="closeDetail">
           <van-icon name="arrow-left" size="16" color="#CBD5E1"></van-icon>
         </div>
diff --git a/src/pages/home/components/SharedVisual/ActionRow.vue b/src/pages/home/components/SharedVisual/ActionRow.vue
index 03cde5b..69913e5 100644
--- a/src/pages/home/components/SharedVisual/ActionRow.vue
+++ b/src/pages/home/components/SharedVisual/ActionRow.vue
@@ -1,22 +1,22 @@
 <template>
-  <div class="visual-action-row flex items-center gap-[12px] p-[12px] bg-white rounded-18 "
-    :class="{ 'is-disabled': disabled }" @click="handleClick">
-    <div class="visual-action-row__icon flex items-center justify-center w-42 h-42 rounded-14 text-[18px] font-bold"
-      :class="toneClass">
+  <div class="flex items-center gap-[12px] p-[12px] bg-white rounded-18 " :class="{ 'opacity-55': disabled }"
+    @click="handleClick">
+    <div
+      class="flex items-center justify-center w-42 h-42 rounded-14 text-[18px] font-bold text-[#047857] bg-[#ecfdf5]">
       <slot name="icon">{{ icon }}</slot>
     </div>
-    <div class="visual-action-row__body flex-1">
-      <div class="visual-action-row__title text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</div>
-      <div v-if="subtitle" class="visual-action-row__subtitle truncate">
+    <div class="min-w-0 flex-1">
+      <div class="text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</div>
+      <div v-if="subtitle" class="mt-1 text-slate-400 text-[11px] font-bold truncate">
         {{ subtitle }}
       </div>
     </div>
-    <div class="visual-action-row__arrow text-[#cbd5e1] font-700">›</div>
+    <van-icon size="24" color="#CBD5E1" name="arrow-right"></van-icon>
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, defineProps, defineEmits } from "vue";
 
 const props = defineProps({
   title: {
@@ -47,14 +47,8 @@ const props = defineProps({
 
 const emit = defineEmits(["action"]);
 
-const toneClass = computed(() => `visual-action-row__icon--${props.tone}`);
-
 const handleClick = () => {
   if (props.disabled) return;
   emit("action", props.payload);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/SharedVisual/BadgePill.vue b/src/pages/home/components/SharedVisual/BadgePill.vue
index 3bfbcf5..3f74b03 100644
--- a/src/pages/home/components/SharedVisual/BadgePill.vue
+++ b/src/pages/home/components/SharedVisual/BadgePill.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="visual-badge flex items-center justify-center rounded-[5px] text-[10px] font-bold whitespace-nowrap"
-    :class="toneClass">
+  <div
+    class="min-h-[20px] py-[2px] px-[8px] leading-[16px] flex items-center justify-center rounded-[5px] text-[10px] text-[#047857] bg-[#ecfdf5] font-bold whitespace-nowrap">
     <slot>{{ label }}</slot>
   </div>
 </template>
@@ -18,10 +18,4 @@ const props = defineProps({
     default: "slate",
   },
 });
-
-const toneClass = computed(() => `visual-badge--${props.tone}`);
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/SharedVisual/CardShell.vue b/src/pages/home/components/SharedVisual/CardShell.vue
index 9d6dad0..816211e 100644
--- a/src/pages/home/components/SharedVisual/CardShell.vue
+++ b/src/pages/home/components/SharedVisual/CardShell.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     class="[box-shadow:0_8px_24px_rgba(15,23,42,0.05)] w-full bg-white border border-[#f1f5f9] rounded-[24px] overflow-hidden"
-    :class="[{ '[transition:transform_0.18s_ease,opacity_0.18s_ease]': pressable, 'opacity-55': disabled }, variantClass]"
+    :class="[{ '[transition:transform_0.18s_ease,opacity_0.18s_ease] active:scale-985 active:opacity-92': pressable, 'opacity-55': disabled }, variantClass]"
     @click="handleClick">
     <slot />
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, defineEmits, defineProps } from "vue";
 
 const props = defineProps({
   variant: {
@@ -35,6 +35,13 @@ const handleClick = () => {
 };
 </script>
 
-<style scoped lang="scss">
-@import "./styles/index.scss";
+<style scoped>
+.visual-card-shell--soft {
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 9px 34px rgba(27, 9, 91, 0.07);
+}
+
+.visual-card-shell--detail {
+  border-radius: 20px;
+}
 </style>
diff --git a/src/pages/home/components/SharedVisual/styles/index.scss b/src/pages/home/components/SharedVisual/styles/index.scss
deleted file mode 100644
index ee8e5d6..0000000
--- a/src/pages/home/components/SharedVisual/styles/index.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-.visual-card-shell {
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
-}
-
-.visual-card-shell--soft {
-  background: rgba(255, 255, 255, 0.84);
-  box-shadow: 0 9px 34px rgba(27, 9, 91, 0.07);
-}
-
-.visual-card-shell--detail {
-  border-radius: 20px;
-}
-
-.visual-card-shell.is-pressable {
-  transition: transform 0.18s ease, opacity 0.18s ease;
-}
-
-.visual-card-shell.is-pressable:active {
-  transform: scale(0.98);
-  opacity: 0.92;
-}
-
-.visual-card-shell.is-disabled,
-.visual-action-row.is-disabled {
-  opacity: 0.55;
-}
-
-.visual-badge {
-  min-height: 20px;
-  padding: 2px 8px;
-  box-sizing: border-box;
-  line-height: 16px;
-}
-
-.visual-badge--slate {
-  color: #475569;
-  background: #f1f5f9;
-}
-
-.visual-badge--green {
-  color: #047857;
-  background: #ecfdf5;
-}
-
-.visual-badge--amber {
-  color: #b45309;
-  background: #fffbeb;
-}
-
-.visual-badge--rose {
-  color: #be123c;
-  background: #fff1f2;
-}
-
-.visual-badge--blue {
-  color: #2563eb;
-  background: #eff6ff;
-}
-
-.visual-badge--purple {
-  color: #7c3aed;
-  background: #f5f3ff;
-}
-
-.visual-action-row {}
-
-.visual-action-row__icon {}
-
-.visual-action-row__icon--green {
-  color: #047857;
-  background: #ecfdf5;
-}
-
-.visual-action-row__icon--blue {
-  color: #2563eb;
-  background: #eff6ff;
-}
-
-.visual-action-row__icon--amber {
-  color: #b45309;
-  background: #fffbeb;
-}
-
-.visual-action-row__icon--rose {
-  color: #be123c;
-  background: #fff1f2;
-}
-
-.visual-action-row__body {
-  min-width: 0;
-}
-
-.visual-action-row__title {}
-
-.visual-action-row__subtitle {
-  margin-top: 4px;
-  color: #94a3b8;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.visual-action-row__arrow {
-  font-size: 24px;
-}
\ No newline at end of file