fix(ui): 限制文件名显示宽度并改用 color-mix 实现进度条背景色

- 为 MaterialUploadModal 中的文件名元素设置 `min-width: 0` 和 `max-width`，确保溢出文本正确显示省略号
- 将 Progress 组件的背景色从 Tailwind `bg-primary/20` 改为 CSS `color-mix`，避免透明度叠加异常

frontend/app/web-gold/src/components/material/MaterialUploadModal.vue

@@ -507,6 +507,8 @@ const handleCancel = () => {
 
 .file-name {
   flex: 1;
+  min-width: 0;
+  max-width: 240px;
   font-size: 14px;
   color: var(--color-text);
   overflow: hidden;
@@ -591,6 +593,8 @@ const handleCancel = () => {
 }
 
 .current-file-name span {
+  min-width: 0;
+  max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -629,6 +633,8 @@ const handleCancel = () => {
 }
 
 .completed-item span {
+  min-width: 0;
+  max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

frontend/app/web-gold/src/components/ui/progress/Progress.vue

@@ -24,15 +24,19 @@ const delegatedProps = reactiveOmit(props, "class")
     v-bind="delegatedProps"
     :class="
       cn(
-        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        'relative h-2 w-full overflow-hidden rounded-full',
         props.class,
       )
     "
+    :style="{ backgroundColor: 'color-mix(in srgb, var(--primary) 20%, transparent)' }"
   >
     <ProgressIndicator
       data-slot="progress-indicator"
-      class="bg-primary h-full w-full flex-1 transition-all"
-      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+      class="h-full w-full flex-1 transition-all"
+      :style="{
+        backgroundColor: 'var(--primary)',
+        transform: `translateX(-${100 - (props.modelValue ?? 0)}%)`,
+      }"
     />
   </ProgressRoot>
 </template>