refactor(platform): 统一控件 - 统一输入按钮与图标控件样式表现

web/src/components/canvas/canvas-cloud-agent.css

@@ -51,26 +51,26 @@
 }
 
 .agent-context-ring {
+    --agent-context-ring-color: var(--agent-accent, currentColor);
     position: relative;
     display: inline-flex;
     flex: none;
     align-items: center;
-    gap: 7px;
-    min-width: 68px;
-    height: 32px;
-    padding: 3px 8px 3px 4px;
-    border: 1px solid color-mix(in srgb, var(--agent-ink) 10%, transparent);
+    gap: 6px;
+    min-width: 64px;
+    height: 30px;
+    padding: 2px 7px 2px 3px;
+    border: 0;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--agent-ink) 4%, transparent);
+    background: color-mix(in srgb, var(--agent-ink) 5%, transparent);
     color: var(--agent-caption);
     cursor: pointer;
-    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
+    transition: background-color 160ms ease, color 160ms ease;
 }
 
 .agent-context-ring:hover,
 .agent-context-ring[aria-expanded="true"] {
-    border-color: color-mix(in srgb, var(--agent-accent) 48%, transparent);
-    background: var(--agent-surface-raised);
+    background: color-mix(in srgb, var(--agent-ink) 9%, transparent);
     color: var(--agent-ink);
 }
 
@@ -79,45 +79,61 @@
     outline-offset: 2px;
 }
 
-.agent-context-ring-visual,
-.agent-context-ring-visual svg {
+.agent-context-ring-visual {
+    position: relative;
     display: block;
-    width: 25px;
-    height: 25px;
+    width: 26px;
+    height: 26px;
     flex: none;
+    overflow: hidden;
+    border-radius: 50%;
+    background: conic-gradient(
+        from -90deg,
+        var(--agent-context-ring-color) 0 var(--agent-context-progress),
+        color-mix(in srgb, var(--agent-ink) 11%, transparent) var(--agent-context-progress) 100%
+    );
 }
 
-.agent-context-ring-visual svg {
-    transform: rotate(-90deg);
-}
-
-.agent-context-ring circle {
-    fill: none;
-    stroke-linecap: round;
-}
-
-.agent-context-ring-track {
-    stroke: color-mix(in srgb, var(--agent-ink) 18%, transparent);
-    stroke-width: 2.4;
-}
-
-.agent-context-ring-value {
-    stroke: var(--agent-accent, currentColor);
-    stroke-width: 2.4;
-    transition: stroke-dashoffset 240ms ease;
+.agent-context-ring-visual::after {
+    position: absolute;
+    inset: 5px;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--agent-surface-raised) 92%, transparent);
+    content: "";
 }
 
 .agent-context-ring-marker {
-    fill: var(--agent-ink);
-    stroke: none;
+    position: absolute;
+    inset: 2px;
+    z-index: 1;
+    border-radius: 50%;
+    transform: rotate(var(--agent-context-marker-angle));
 }
 
-.agent-context-ring.is-watch .agent-context-ring-value { stroke: #d9973b; }
-.agent-context-ring.is-compress .agent-context-ring-value,
-.agent-context-ring.is-compacting .agent-context-ring-value { stroke: #d4534e; }
-.agent-context-ring.is-compacting .agent-context-ring-visual svg { animation: agent-context-spin 1.4s linear infinite; }
-.agent-context-ring.is-unknown .agent-context-ring-value,
-.agent-context-ring.is-stale .agent-context-ring-value { stroke-dasharray: 4 6; }
+.agent-context-ring-marker::after {
+    position: absolute;
+    top: -1px;
+    left: 50%;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--agent-context-ring-color);
+    content: "";
+    transform: translateX(-50%);
+}
+
+.agent-context-ring.is-watch {
+    --agent-context-ring-color: #d9973b;
+}
+
+.agent-context-ring.is-compress,
+.agent-context-ring.is-compacting {
+    --agent-context-ring-color: #d4534e;
+}
+
+.agent-context-ring.is-compacting .agent-context-ring-visual { animation: agent-context-spin 1.4s linear infinite; }
+.agent-context-ring.is-unknown .agent-context-ring-visual,
+.agent-context-ring.is-stale .agent-context-ring-visual { opacity: 0.72; }
 
 .agent-context-meter-copy {
     display: grid;
@@ -267,7 +283,6 @@
     border-radius: inherit;
     background: #8b93ff;
     background: linear-gradient(90deg, color-mix(in srgb, var(--agent-accent, #8b93ff) 58%, white), var(--agent-accent, #8b93ff));
-    box-shadow: 0 0 12px color-mix(in srgb, var(--agent-accent, #8b93ff) 48%, transparent);
     transition: width 240ms ease;
 }
 
@@ -359,8 +374,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .agent-context-ring.is-compacting .agent-context-ring-visual svg { animation: none; }
-    .agent-context-ring-value,
+    .agent-context-ring.is-compacting .agent-context-ring-visual { animation: none; }
+    .agent-context-ring-visual,
     .agent-context-progress > span { transition: none; }
 }