欢迎模块增加应用图标

main.yaml

@@ -4569,21 +4569,23 @@ views:
                     media_content_id: __MANUAL_ENTRY__
             grid_options:
               rows: auto
-              columns: 3
+              columns: 4
+          - type: custom:vertical-stack-in-card
+            cards:
               - type: custom:button-card
                 show_icon: false
                 show_name: false
                 show_state: false
                 grid_options:
                   columns: 12
-              rows: 2
+                  row: 2
                 custom_fields:
                   greeting: |
                     [[[
                       const h = new Date().getHours();
                       if (h < 6) return "夜深了";
                       if (h < 11) return "早上好";
-                  if (h < 14) return "中午好";
+                      if (h < 14) return "晏昼好";
                       if (h < 18) return "下午好";
                       return "晚上好";
                     ]]]
@@ -4601,16 +4603,6 @@ views:
                         { month: 'long', day: 'numeric', weekday: 'long' }
                       );
                     ]]]
-              subtitle: |
-                [[[
-                  const leak = Number(states['sensor.water_damage_count']?.state ?? 0);
-                  const lights = Number(states['sensor.lights_of_count']?.state ?? 0);
-                  const ac = Number(states['sensor.aircondition_of_count']?.state ?? 0);
-
-                  if (leak > 0) return `⚠ 检测到 ${leak} 个水浸告警`;
-                  if (lights === 0 && ac === 0) return "家里一切正常";
-                  return `${lights} 盏灯开启 · ${ac} 台空调运行`;
-                ]]]
                 styles:
                   card:
                     - height: 120px
@@ -4650,6 +4642,630 @@ views:
                       - align-self: start
                       - font-size: 14px
                       - color: rgba(255,255,255,0.55)
+              - type: custom:mushroom-chips-card
+                chips:
+                  - type: template
+                    entity: sensor.lights_of_count
+                    icon: mdi:lightbulb-group
+                    content: |-
+                      {% if is_state('sensor.lights_of_count','0') %}
+                            
+                      {% else %}
+                        {{states('sensor.lights_of_count')}}
+                      {% endif %}
+                alignment: end
+                card_mod:
+                  style: >
+                    ha-card {
+                      /* ================================== */
+                      /* USER CONFIG HERE                   */
+                      /* ================================== */
+
+                      /* 1. ACTIVE STATE (NUMERIC) */
+                      {% set threshold_below = false %}
+                      {% set threshold_above = 1 %}
+
+                      /* 2. POSITIONING */
+                      {% set pos_y = 'bottom' %}                
+                      {% set pos_y_val = '15px' %}
+                      {% set pos_x = 'left' %}              
+                      {% set pos_x_val = '5px' %}
+
+                      /* 3. SIZING */
+                      {% set icon_size = '18px' %}          
+                      {% set text_size = '12px' %}          
+                      {% set badge_height = '5px' %}        
+                      {% set border_radius = '10px' %}      
+                      {% set border_thickness = '1px' %}
+                      
+                      /* 4. COLORS (HEX, RGB, Color Name) */
+                      /* --- Active --- */
+                      {% set active_bg = '#a63a3a' %} 
+                      {% set active_icon = 'yellow' %}
+                      {% set active_text = 'white' %}
+                      {% set active_border = '#ab1c1c' %}
+                      {% set active_opacity = 0 %}
+                      
+                      /* --- Inactive --- */
+                      {% set inactive_bg = 'grey' %}
+                      {% set inactive_icon = 'grey' %}
+                      {% set inactive_text = 'darkgrey' %}
+                      {% set inactive_border = 'transparent' %}
+                      {% set inactive_opacity = 0.3 %}
+
+                      /* 5. ANIMATIONS */
+                      /* Options: pulse, shake, wobble   */
+                      /* flash, heartbeat, swing, vibrate  */
+                      
+                      {% set anim_type = 'none' %}
+
+                      /* true = 24/7, false = only when active */
+                      {% set always_animate = false %}
+                      
+                      {% set anim_intensity_sec = 0.5 %} /* 0.1 to 1  */
+                      {% set anim_duration_sec = 2 %}
+                      {% set anim_delay_sec = 5 %}
+
+                      /* ================================== */
+                      /* USER CONFIG END (DONT TOUCH BELOW) */
+                      /* ================================== */
+
+                      {% set current_state = states(config.chips[0].entity) %}
+                      {% set state_num = current_state | float(-99999) %}
+                      
+                      {% set check_below = threshold_below | string | lower != 'false' %}
+                      {% set check_above = threshold_above | string | lower != 'false' %}
+                      
+                      {% set is_active_below = check_below and state_num != -99999 and state_num <= (threshold_below | float(-99999)) %}
+                      {% set is_active_above = check_above and state_num != -99999 and state_num >= (threshold_above | float(-99999)) %}
+                      
+                      {% set is_active = is_active_below or is_active_above %}
+                      
+                      {% if is_active %}
+                        {% set current_bg = active_bg %}
+                        {% set current_icon = active_icon %}
+                        {% set current_text = active_text %}
+                        {% set current_border = active_border %}
+                        {% set current_op = active_opacity %}
+                        {% set current_anim = anim_type %}
+                      {% else %}
+                        {% set current_bg = inactive_bg %}
+                        {% set current_icon = inactive_icon %}
+                        {% set current_text = inactive_text %}
+                        {% set current_border = inactive_border %}
+                        {% set current_op = inactive_opacity %}
+                        {% set current_anim = anim_type if always_animate else 'none' %}
+                      {% endif %}
+
+                      {% set master_cycle = anim_duration_sec + anim_delay_sec %}
+                      {% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
+                      {% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}
+
+                      --chip-padding: {{ badge_height }};
+                      --chip-border-radius: {{ border_radius }};
+                      
+                      --chip-border-width: 0px !important;
+                      --ha-card-border-width: 0px !important;
+                      
+                      --chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;
+
+                      --text-color: {{ current_icon }} !important;
+                      --color: {{ current_icon }} !important; 
+                      --chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
+                      --chip-font-size: {{ text_size }} !important;
+                      --chip-icon-size: {{ icon_size }} !important; 
+                      --mdc-icon-size: {{ icon_size }} !important;   
+                      --chip-height: auto !important;
+                      --primary-text-color: {{ current_text }} !important;
+                      --secondary-text-color: {{ current_text }} !important;
+
+                      position: absolute !important;
+                      {{ pos_y }}: {{ pos_y_val }};
+                      {{ pos_x }}: {{ pos_x_val }};
+                      z-index: 1;
+                      border: none !important;
+                      border-radius: {{ border_radius }} !important;
+                      box-shadow: 0 4px 6px rgba(0,0,0,0.2);
+                      overflow: visible !important;
+                      will-change: transform; 
+                      
+                      {% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
+                        animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
+                      {% endif %}
+                    }
+
+
+                    ha-state-icon, ha-icon {
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      width: {{ icon_size }} !important; 
+                      height: {{ icon_size }} !important;
+                    }
+
+
+                    {% if config.chips[0].content is not defined or
+                    config.chips[0].content | length == 0 %}
+                       ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
+                       .content { display: none; }
+                    {% else %}
+                       ha-card { padding: 0 10px !important; }
+                       .content { padding-left: 5px; font-weight: bold; }
+                    {% endif %}
+
+
+                    {% if current_anim != 'none' and iterations > 0 and
+                    master_cycle > 0 %}
+
+                    @keyframes anim-{{ config.chips[0].entity | replace('.',
+                    '-') }}-{{ anim_type }} {
+                      {% for i in range(iterations) %}
+                        {% set t = i * step_percent %} 
+                        
+                        {% if anim_type == 'pulse' %}
+                          {{ t + 0 }}% { transform: scale3d(1, 1, 1); }
+                          {{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
+                          {{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
+
+                        {% elif anim_type == 'shake' %}
+                          {{ t + 0 }}% { transform: rotateZ(0deg); }
+                          {{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
+                          {{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
+                          {{ t + step_percent }}% { transform: rotateZ(0deg); }
+
+                        {% elif anim_type == 'flash' %}
+                          {{ t + 0 }}% { opacity: 1; }
+                          {{ t + (step_percent * 0.5) }}% { opacity: 0; }
+                          {{ t + step_percent }}% { opacity: 1; }
+
+                        {% elif anim_type == 'wobble' %}
+                          {{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
+                          {{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
+                          {{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
+                          {{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }
+
+                        {% elif anim_type == 'heartbeat' %}
+                          {{ t + 0 }}% { transform: scale3d(1, 1, 1); }
+                          {{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
+                          {{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
+                          {{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
+                          {{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
+
+                        {% elif anim_type == 'swing' %}
+                          {{ t + 0 }}% { transform: rotateZ(0deg); }
+                          {{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
+                          {{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
+                          {{ t + step_percent }}% { transform: rotateZ(0deg); }
+
+                        {% elif anim_type == 'vibrate' %}
+                          {{ t + 0 }}% { transform: translate3d(0, 0, 0); }
+                          {{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
+                          {{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
+                          {{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
+                          {{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
+                          {{ t + step_percent }}% { transform: translate3d(0, 0, 0); }
+
+                        {% endif %}
+                      {% endfor %}
+                    }
+
+                    {% endif %}
+              - type: custom:mushroom-chips-card
+                chips:
+                  - type: template
+                    entity: sensor.aircondition_of_count
+                    icon: mdi:air-conditioner
+                    content: |-
+                      {% if is_state('sensor.aircondition_of_count','0') %}
+                            
+                      {% else %}
+                        {{states('sensor.aircondition_of_count')}}
+                      {% endif %}
+                alignment: end
+                card_mod:
+                  style: >
+                    ha-card {
+                      /* ================================== */
+                      /* USER CONFIG HERE                   */
+                      /* ================================== */
+
+                      /* 1. ACTIVE STATE (NUMERIC) */
+                      {% set threshold_below = false %}
+                      {% set threshold_above = 1 %}
+
+                      /* 2. POSITIONING */
+                      {% set pos_y = 'bottom' %}                
+                      {% set pos_y_val = '15px' %}
+                      {% set pos_x = 'left' %}              
+                      {% set pos_x_val = '40px' %}
+
+                      /* 3. SIZING */
+                      {% set icon_size = '18px' %}          
+                      {% set text_size = '12px' %}          
+                      {% set badge_height = '5px' %}        
+                      {% set border_radius = '10px' %}      
+                      {% set border_thickness = '1px' %}
+                      
+                      /* 4. COLORS (HEX, RGB, Color Name) */
+                      /* --- Active --- */
+                      {% set active_bg = '#a63a3a' %} 
+                      {% set active_icon = '#42A5F5' %}
+                      {% set active_text = 'white' %}
+                      {% set active_border = '#ab1c1c' %}
+                      {% set active_opacity = 0 %}
+                      
+                      /* --- Inactive --- */
+                      {% set inactive_bg = 'grey' %}
+                      {% set inactive_icon = 'grey' %}
+                      {% set inactive_text = 'darkgrey' %}
+                      {% set inactive_border = 'transparent' %}
+                      {% set inactive_opacity = 0.3 %}
+
+                      /* 5. ANIMATIONS */
+                      /* Options: pulse, shake, wobble   */
+                      /* flash, heartbeat, swing, vibrate  */
+                      
+                      {% set anim_type = 'none' %}
+
+                      /* true = 24/7, false = only when active */
+                      {% set always_animate = false %}
+                      
+                      {% set anim_intensity_sec = 0.5 %} /* 0.1 to 1  */
+                      {% set anim_duration_sec = 2 %}
+                      {% set anim_delay_sec = 5 %}
+
+                      /* ================================== */
+                      /* USER CONFIG END (DONT TOUCH BELOW) */
+                      /* ================================== */
+
+                      {% set current_state = states(config.chips[0].entity) %}
+                      {% set state_num = current_state | float(-99999) %}
+                      
+                      {% set check_below = threshold_below | string | lower != 'false' %}
+                      {% set check_above = threshold_above | string | lower != 'false' %}
+                      
+                      {% set is_active_below = check_below and state_num != -99999 and state_num <= (threshold_below | float(-99999)) %}
+                      {% set is_active_above = check_above and state_num != -99999 and state_num >= (threshold_above | float(-99999)) %}
+                      
+                      {% set is_active = is_active_below or is_active_above %}
+                      
+                      {% if is_active %}
+                        {% set current_bg = active_bg %}
+                        {% set current_icon = active_icon %}
+                        {% set current_text = active_text %}
+                        {% set current_border = active_border %}
+                        {% set current_op = active_opacity %}
+                        {% set current_anim = anim_type %}
+                      {% else %}
+                        {% set current_bg = inactive_bg %}
+                        {% set current_icon = inactive_icon %}
+                        {% set current_text = inactive_text %}
+                        {% set current_border = inactive_border %}
+                        {% set current_op = inactive_opacity %}
+                        {% set current_anim = anim_type if always_animate else 'none' %}
+                      {% endif %}
+
+                      {% set master_cycle = anim_duration_sec + anim_delay_sec %}
+                      {% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
+                      {% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}
+
+                      --chip-padding: {{ badge_height }};
+                      --chip-border-radius: {{ border_radius }};
+                      
+                      --chip-border-width: 0px !important;
+                      --ha-card-border-width: 0px !important;
+                      
+                      --chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;
+
+                      --text-color: {{ current_icon }} !important;
+                      --color: {{ current_icon }} !important; 
+                      --chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
+                      --chip-font-size: {{ text_size }} !important;
+                      --chip-icon-size: {{ icon_size }} !important; 
+                      --mdc-icon-size: {{ icon_size }} !important;   
+                      --chip-height: auto !important;
+                      --primary-text-color: {{ current_text }} !important;
+                      --secondary-text-color: {{ current_text }} !important;
+
+                      position: absolute !important;
+                      {{ pos_y }}: {{ pos_y_val }};
+                      {{ pos_x }}: {{ pos_x_val }};
+                      z-index: 1;
+                      border: none !important;
+                      border-radius: {{ border_radius }} !important;
+                      box-shadow: 0 4px 6px rgba(0,0,0,0.2);
+                      overflow: visible !important;
+                      will-change: transform; 
+                      
+                      {% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
+                        animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
+                      {% endif %}
+                    }
+
+
+                    ha-state-icon, ha-icon {
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      width: {{ icon_size }} !important; 
+                      height: {{ icon_size }} !important;
+                    }
+
+
+                    {% if config.chips[0].content is not defined or
+                    config.chips[0].content | length == 0 %}
+                       ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
+                       .content { display: none; }
+                    {% else %}
+                       ha-card { padding: 0 10px !important; }
+                       .content { padding-left: 5px; font-weight: bold; }
+                    {% endif %}
+
+
+                    {% if current_anim != 'none' and iterations > 0 and
+                    master_cycle > 0 %}
+
+                    @keyframes anim-{{ config.chips[0].entity | replace('.',
+                    '-') }}-{{ anim_type }} {
+                      {% for i in range(iterations) %}
+                        {% set t = i * step_percent %} 
+                        
+                        {% if anim_type == 'pulse' %}
+                          {{ t + 0 }}% { transform: scale3d(1, 1, 1); }
+                          {{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
+                          {{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
+
+                        {% elif anim_type == 'shake' %}
+                          {{ t + 0 }}% { transform: rotateZ(0deg); }
+                          {{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
+                          {{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
+                          {{ t + step_percent }}% { transform: rotateZ(0deg); }
+
+                        {% elif anim_type == 'flash' %}
+                          {{ t + 0 }}% { opacity: 1; }
+                          {{ t + (step_percent * 0.5) }}% { opacity: 0; }
+                          {{ t + step_percent }}% { opacity: 1; }
+
+                        {% elif anim_type == 'wobble' %}
+                          {{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
+                          {{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
+                          {{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
+                          {{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }
+
+                        {% elif anim_type == 'heartbeat' %}
+                          {{ t + 0 }}% { transform: scale3d(1, 1, 1); }
+                          {{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
+                          {{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
+                          {{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
+                          {{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
+
+                        {% elif anim_type == 'swing' %}
+                          {{ t + 0 }}% { transform: rotateZ(0deg); }
+                          {{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
+                          {{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
+                          {{ t + step_percent }}% { transform: rotateZ(0deg); }
+
+                        {% elif anim_type == 'vibrate' %}
+                          {{ t + 0 }}% { transform: translate3d(0, 0, 0); }
+                          {{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
+                          {{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
+                          {{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
+                          {{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
+                          {{ t + step_percent }}% { transform: translate3d(0, 0, 0); }
+
+                        {% endif %}
+                      {% endfor %}
+                    }
+
+                    {% endif %}
+              - type: custom:mushroom-chips-card
+                chips:
+                  - type: template
+                    entity: fan.quan_wu_feng_shan
+                    icon: mdi:fan
+                    content: |-
+                      {% if is_state('fan.quan_wu_feng_shan','0') %}
+                            
+                      {% else %}
+                        {{states('fan.quan_wu_feng_shan')}}
+                      {% endif %}
+                alignment: end
+                card_mod:
+                  style: >
+                    ha-card {
+                      /* ================================== */
+                      /* USER CONFIG HERE                   */
+                      /* ================================== */
+
+                      /* 1. ACTIVE STATE (NUMERIC) */
+                      {% set threshold_below = false %}
+                      {% set threshold_above = 1 %}
+
+                      /* 2. POSITIONING */
+                      {% set pos_y = 'bottom' %}                
+                      {% set pos_y_val = '15px' %}
+                      {% set pos_x = 'left' %}              
+                      {% set pos_x_val = '75px' %}
+
+                      /* 3. SIZING */
+                      {% set icon_size = '18px' %}          
+                      {% set text_size = '12px' %}          
+                      {% set badge_height = '5px' %}        
+                      {% set border_radius = '10px' %}      
+                      {% set border_thickness = '1px' %}
+                      
+                      /* 4. COLORS (HEX, RGB, Color Name) */
+                      /* --- Active --- */
+                      {% set active_bg = '#a63a3a' %} 
+                      {% set active_icon = '#42A5F5' %}
+                      {% set active_text = 'white' %}
+                      {% set active_border = '#ab1c1c' %}
+                      {% set active_opacity = 0 %}
+                      
+                      /* --- Inactive --- */
+                      {% set inactive_bg = 'grey' %}
+                      {% set inactive_icon = 'grey' %}
+                      {% set inactive_text = 'darkgrey' %}
+                      {% set inactive_border = 'transparent' %}
+                      {% set inactive_opacity = 0.3 %}
+
+                      /* 5. ANIMATIONS */
+                      /* Options: pulse, shake, wobble   */
+                      /* flash, heartbeat, swing, vibrate  */
+                      
+                      {% set anim_type = 'none' %}
+
+                      /* true = 24/7, false = only when active */
+                      {% set always_animate = false %}
+                      
+                      {% set anim_intensity_sec = 0.5 %} /* 0.1 to 1  */
+                      {% set anim_duration_sec = 2 %}
+                      {% set anim_delay_sec = 5 %}
+
+                      /* ================================== */
+                      /* USER CONFIG END (DONT TOUCH BELOW) */
+                      /* ================================== */
+
+                      {% set current_state = states(config.chips[0].entity) %}
+                      {% set state_num = current_state | float(-99999) %}
+                      
+                      {% set check_below = threshold_below | string | lower != 'false' %}
+                      {% set check_above = threshold_above | string | lower != 'false' %}
+                      
+                      {% set is_active_below = check_below and state_num != -99999 and state_num <= (threshold_below | float(-99999)) %}
+                      {% set is_active_above = check_above and state_num != -99999 and state_num >= (threshold_above | float(-99999)) %}
+                      
+                      {% set is_active = is_active_below or is_active_above %}
+                      
+                      {% if is_active %}
+                        {% set current_bg = active_bg %}
+                        {% set current_icon = active_icon %}
+                        {% set current_text = active_text %}
+                        {% set current_border = active_border %}
+                        {% set current_op = active_opacity %}
+                        {% set current_anim = anim_type %}
+                      {% else %}
+                        {% set current_bg = inactive_bg %}
+                        {% set current_icon = inactive_icon %}
+                        {% set current_text = inactive_text %}
+                        {% set current_border = inactive_border %}
+                        {% set current_op = inactive_opacity %}
+                        {% set current_anim = anim_type if always_animate else 'none' %}
+                      {% endif %}
+
+                      {% set master_cycle = anim_duration_sec + anim_delay_sec %}
+                      {% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
+                      {% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}
+
+                      --chip-padding: {{ badge_height }};
+                      --chip-border-radius: {{ border_radius }};
+                      
+                      --chip-border-width: 0px !important;
+                      --ha-card-border-width: 0px !important;
+                      
+                      --chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;
+
+                      --text-color: {{ current_icon }} !important;
+                      --color: {{ current_icon }} !important; 
+                      --chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
+                      --chip-font-size: {{ text_size }} !important;
+                      --chip-icon-size: {{ icon_size }} !important; 
+                      --mdc-icon-size: {{ icon_size }} !important;   
+                      --chip-height: auto !important;
+                      --primary-text-color: {{ current_text }} !important;
+                      --secondary-text-color: {{ current_text }} !important;
+
+                      position: absolute !important;
+                      {{ pos_y }}: {{ pos_y_val }};
+                      {{ pos_x }}: {{ pos_x_val }};
+                      z-index: 1;
+                      border: none !important;
+                      border-radius: {{ border_radius }} !important;
+                      box-shadow: 0 4px 6px rgba(0,0,0,0.2);
+                      overflow: visible !important;
+                      will-change: transform; 
+                      
+                      {% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
+                        animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
+                      {% endif %}
+                    }
+
+
+                    ha-state-icon, ha-icon {
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      width: {{ icon_size }} !important; 
+                      height: {{ icon_size }} !important;
+                    }
+
+
+                    {% if config.chips[0].content is not defined or
+                    config.chips[0].content | length == 0 %}
+                       ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
+                       .content { display: none; }
+                    {% else %}
+                       ha-card { padding: 0 10px !important; }
+                       .content { padding-left: 5px; font-weight: bold; }
+                    {% endif %}
+
+
+                    {% if current_anim != 'none' and iterations > 0 and
+                    master_cycle > 0 %}
+
+                    @keyframes anim-{{ config.chips[0].entity | replace('.',
+                    '-') }}-{{ anim_type }} {
+                      {% for i in range(iterations) %}
+                        {% set t = i * step_percent %} 
+                        
+                        {% if anim_type == 'pulse' %}
+                          {{ t + 0 }}% { transform: scale3d(1, 1, 1); }
+                          {{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
+                          {{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
+
+                        {% elif anim_type == 'shake' %}
+                          {{ t + 0 }}% { transform: rotateZ(0deg); }
+                          {{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
+                          {{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
+                          {{ t + step_percent }}% { transform: rotateZ(0deg); }
+
+                        {% elif anim_type == 'flash' %}
+                          {{ t + 0 }}% { opacity: 1; }
+                          {{ t + (step_percent * 0.5) }}% { opacity: 0; }
+                          {{ t + step_percent }}% { opacity: 1; }
+
+                        {% elif anim_type == 'wobble' %}
+                          {{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
+                          {{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
+                          {{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
+                          {{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }
+
+                        {% elif anim_type == 'heartbeat' %}
+                          {{ t + 0 }}% { transform: scale3d(1, 1, 1); }
+                          {{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
+                          {{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
+                          {{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
+                          {{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
+
+                        {% elif anim_type == 'swing' %}
+                          {{ t + 0 }}% { transform: rotateZ(0deg); }
+                          {{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
+                          {{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
+                          {{ t + step_percent }}% { transform: rotateZ(0deg); }
+
+                        {% elif anim_type == 'vibrate' %}
+                          {{ t + 0 }}% { transform: translate3d(0, 0, 0); }
+                          {{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
+                          {{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
+                          {{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
+                          {{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
+                          {{ t + step_percent }}% { transform: translate3d(0, 0, 0); }
+
+                        {% endif %}
+                      {% endfor %}
+                    }
+
+                    {% endif %}
       - type: grid
         column_span: 4
         cards:
@@ -6377,6 +6993,8 @@ views:
                   /* 组合卡片边缘与内部卡片之间的距离 */
                   padding: 2px 4px !important;
                 }
+            grid_options:
+              columns: 10
           - square: false
             type: grid
             cards:
@@ -7476,7 +8094,7 @@ views:
             hold_action:
               action: more-info
             grid_options:
-              columns: 4
+              columns: 5
               rows: 1
           - type: custom:mushroom-template-card
             entity: fan.xiaomi_cn_2196552583_p90_s_2_fan
@@ -7536,7 +8154,7 @@ views:
             show_brightness_control: true
             show_color_temp_control: true
             grid_options:
-              columns: 4
+              columns: 6
               rows: 2
           - type: custom:mushroom-light-card
             entity: light.shhf_cn_1129134246_sflt11_s_2_light
@@ -7546,7 +8164,7 @@ views:
             show_brightness_control: true
             show_color_temp_control: true
             grid_options:
-              columns: 4
+              columns: 6
               rows: 2
           - type: custom:mushroom-light-card
             entity: light.pmfbj_cn_1186735998_xsx340_s_2
@@ -7556,7 +8174,7 @@ views:
             show_brightness_control: true
             show_color_temp_control: true
             grid_options:
-              columns: 4
+              columns: 6
               rows: 2
           - type: custom:mushroom-light-card
             entity: light.pmfbj_cn_1186772227_xsx340_s_2
@@ -7566,7 +8184,7 @@ views:
             show_brightness_control: true
             show_color_temp_control: true
             grid_options:
-              columns: 4
+              columns: 6
               rows: 2
           - type: custom:mushroom-light-card
             entity: light.pmfbj_cn_1186744390_xsx340_s_2
@@ -7576,7 +8194,7 @@ views:
             show_brightness_control: true
             show_color_temp_control: true
             grid_options:
-              columns: 4
+              columns: 6
               rows: 2
           - type: custom:mushroom-light-card
             entity: light.opple_cn_2005385416_moat_s_2_light
@@ -7586,7 +8204,7 @@ views:
             show_brightness_control: true
             show_color_temp_control: true
             grid_options:
-              columns: 4
+              columns: 6
               rows: 2
     header:
       layout: responsive