style(admin): C-4 HomeBannerManage/FileManage 内联 style 清理 38 处全归零 - w-*/full-width 宽度类 + file-icon/tag-chip/stat-chips 结构类 + 文件类型图标 fi-* 色值类

cfc-web/src/views/admin/FileManage.vue

@@ -2,7 +2,7 @@
   <div class="file-manage">
     <el-card>
       <PageHeader slot="header" title="文件管理" />
-      <el-row :gutter="16" style="margin-bottom:16px">
+      <el-row :gutter="16" class="mb-16">
         <el-col :span="6">
           <StatCard label="总文件数" :value="stats.total || 0" />
         </el-col>
@@ -11,7 +11,7 @@
         </el-col>
         <el-col :span="12">
           <el-card shadow="never" class="stat-card">
-            <div style="display:flex;gap:12px;flex-wrap:wrap">
+            <div class="stat-chips">
               <StatusTag v-for="c in stats.byCategory || []" :key="c.category" type="primary" :text="c.category + ': ' + c.cnt" size="small" />
             </div>
             <div class="stat-label">分类分布</div>
@@ -20,7 +20,7 @@
       </el-row>
 
       <div class="filter-bar">
-        <el-select v-model="query.category" placeholder="分类" clearable style="width:130px">
+        <el-select v-model="query.category" placeholder="分类" clearable class="w-130">
           <el-option label="全部" value=""></el-option>
           <el-option label="articles" value="articles"></el-option>
           <el-option label="kb-images" value="kb-images"></el-option>
@@ -29,7 +29,7 @@
           <el-option label="health-reports" value="health-reports"></el-option>
           <el-option label="general" value="general"></el-option>
         </el-select>
-        <el-select v-model="query.fileType" placeholder="文件类型" clearable style="width:120px">
+        <el-select v-model="query.fileType" placeholder="文件类型" clearable class="w-120">
           <el-option label="全部" value=""></el-option>
           <el-option label="image" value="image"></el-option>
           <el-option label="pdf" value="pdf"></el-option>
@@ -37,16 +37,16 @@
           <el-option label="audio" value="audio"></el-option>
           <el-option label="other" value="other"></el-option>
         </el-select>
-        <el-select v-model="query.tagIds" placeholder="标签" multiple clearable style="width:200px">
+        <el-select v-model="query.tagIds" placeholder="标签" multiple clearable class="w-200">
           <el-option v-for="t in tagOptions" :key="t.id" :label="t.name" :value="t.id"></el-option>
         </el-select>
-        <el-input v-model="query.search" placeholder="搜索文件名/描述" style="width:200px" @keyup.enter.native="loadData"></el-input>
-        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:240px"></el-date-picker>
+        <el-input v-model="query.search" placeholder="搜索文件名/描述" class="w-200" @keyup.enter.native="loadData"></el-input>
+        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="w-240"></el-date-picker>
         <el-button type="primary" @click="loadData">查询</el-button>
       </div>
 
             <div class="adm-table-wrap">
-<el-table :data="tableData" border stripe v-loading="loading" style="margin-top:16px" height="100%">
+<el-table :data="tableData" border stripe v-loading="loading" class="mt-16" height="100%">
         <el-table-column prop="id" label="ID" width="70">
           <template slot="header">
             <span class="sort-header" @click.stop="onSortClick('id', $event)">ID<span v-if="sortIndex('id') !== null" class="sort-index" :class="sortClass('id') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('id') }}</span>{{ sortIcon('id') }}</span>
@@ -54,11 +54,11 @@
         </el-table-column>
         <el-table-column label="预览" width="70">
           <template slot-scope="scope">
-            <el-image v-if="scope.row.fileType === 'image'" :src="scope.row.url" style="width:40px;height:40px;border-radius:4px" fit="cover" :preview-src-list="[scope.row.url]"></el-image>
-            <i v-else-if="scope.row.fileType === 'pdf'" class="el-icon-document" style="font-size:28px;color:var(--adm-error);display:block;text-align:center"></i>
-            <i v-else-if="scope.row.fileType === 'video'" class="el-icon-video-camera" style="font-size:28px;color:var(--adm-primary);display:block;text-align:center"></i>
-            <i v-else-if="scope.row.fileType === 'audio'" class="el-icon-headset" style="font-size:28px;color:var(--adm-success);display:block;text-align:center"></i>
-            <i v-else class="el-icon-document" style="font-size:28px;color:var(--adm-text-45);display:block;text-align:center"></i>
+            <el-image v-if="scope.row.fileType === 'image'" :src="scope.row.url" class="file-thumb" fit="cover" :preview-src-list="[scope.row.url]"></el-image>
+            <i v-else-if="scope.row.fileType === 'pdf'" class="el-icon-document file-icon fi-error"></i>
+            <i v-else-if="scope.row.fileType === 'video'" class="el-icon-video-camera file-icon fi-primary"></i>
+            <i v-else-if="scope.row.fileType === 'audio'" class="el-icon-headset file-icon fi-success"></i>
+            <i v-else class="el-icon-document file-icon fi-muted"></i>
           </template>
         </el-table-column>
         <el-table-column prop="originalFilename" label="文件名" min-width="180" show-overflow-tooltip>
@@ -87,7 +87,7 @@
         </el-table-column>
         <el-table-column label="标签" min-width="140">
           <template slot-scope="scope">
-            <el-tag v-for="t in (scope.row.tags || [])" :key="t.id" size="mini" style="margin-right:4px;margin-bottom:2px;border:0" :style="{ backgroundColor: t.color + '22', color: t.color }">{{ t.name }}</el-tag>
+            <el-tag v-for="t in (scope.row.tags || [])" :key="t.id" size="mini" class="tag-chip" :style="{ backgroundColor: t.color + '22', color: t.color }">{{ t.name }}</el-tag>
             <span v-if="!scope.row.tags || scope.row.tags.length === 0" class="no-tag">-</span>
           </template>
         </el-table-column>
@@ -105,13 +105,13 @@
         <el-table-column label="操作" width="120" fixed="right">
           <template slot-scope="scope">
             <el-button size="mini" type="text" @click="openEdit(scope.row)">编辑</el-button>
-            <el-button size="mini" type="text" style="color:var(--adm-error)" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button size="mini" type="text" class="text-error" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       </div>
 
-      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.page" :page-size="query.pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]" style="margin-top:16px"></el-pagination>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.page" :page-size="query.pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]" class="mt-16"></el-pagination>
     </el-card>
 
     <el-dialog title="编辑文件" :visible.sync="editVisible" width="500px">
@@ -124,7 +124,7 @@
         </el-form-item>
         <el-form-item label="描述"><el-input v-model="editForm.description" type="textarea" :rows="3" maxlength="500"></el-input></el-form-item>
         <el-form-item label="标签">
-          <el-select v-model="editForm.tagIds" multiple placeholder="选择标签" style="width:100%">
+          <el-select v-model="editForm.tagIds" multiple placeholder="选择标签" class="full-width">
             <el-option v-for="t in tagOptions" :key="t.id" :label="t.name" :value="t.id">
               <span :style="{ color: t.color }">{{ t.name }}</span>
             </el-option>
@@ -208,8 +208,25 @@ export default {
 </script>
 
 <style scoped>
-.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
 .stat-card { text-align: center; }
 .stat-label { font-size: 12px; color: var(--adm-text-45); margin-top: 4px; }
 .no-tag { color: var(--adm-text-25); }
+/* == C 批内联清理工具类 == */
+.w-130 { width: 130px; }
+.w-120 { width: 120px; }
+.w-200 { width: 200px; }
+.w-240 { width: 240px; }
+.full-width { width: 100%; }
+.mt-16 { margin-top: 16px; }
+.mb-16 { margin-bottom: 16px; }
+.stat-chips { display: flex; gap: 12px; flex-wrap: wrap; }
+.file-thumb { width: 40px; height: 40px; border-radius: 4px; }
+.file-icon { font-size: 28px; display: block; text-align: center; }
+.fi-error { color: var(--adm-error); }
+.fi-primary { color: var(--adm-primary); }
+.fi-success { color: var(--adm-success); }
+.fi-muted { color: var(--adm-text-45); }
+.tag-chip { margin-right: 4px; margin-bottom: 2px; border: 0; }
+.text-error { color: var(--adm-error); }
 </style>

cfc-web/src/views/admin/HomeBannerManage.vue

@@ -7,13 +7,13 @@
       
 </PageHeader>
 
-      <div class="filter-bar" style="margin-bottom:12px;">
-        <el-select v-model="filterStatus" placeholder="启用状态" @change="loadList" clearable style="width:120px;" clearable>
+      <div class="filter-bar">
+        <el-select v-model="filterStatus" placeholder="启用状态" @change="loadList" clearable class="w-120" clearable>
           <el-option label="全部状态" value="" />
           <el-option label="已启用" value="1" />
           <el-option label="已禁用" value="0" />
         </el-select>
-        <el-select v-model="filterType" placeholder="类型" @change="loadList" clearable style="width:120px;">
+        <el-select v-model="filterType" placeholder="类型" @change="loadList" clearable class="w-120">
           <el-option label="全部类型" value="" />
           <el-option label="活动" value="activity" />
           <el-option label="商品" value="product" />
@@ -50,13 +50,13 @@
               <div v-else-if="row.bannerType === 'link' && row.linkUrl">
                 <StatusTag size="mini" type="info" :text="row.linkUrl" />
               </div>
-              <div v-else style="color:var(--adm-text-25)">-</div>
+              <div v-else class="text-faint">-</div>
             </template>
           </el-table-column>
           <el-table-column label="封面" width="80">
             <template slot-scope="{ row }">
-              <img v-if="row.coverImage" :src="row.coverImage" style="width:50px;height:35px;object-fit:cover;border-radius:4px;" />
-              <span v-else style="color:var(--adm-text-45)">无</span>
+              <img v-if="row.coverImage" :src="row.coverImage" class="banner-thumb" />
+              <span v-else class="text-muted">无</span>
             </template>
           </el-table-column>
           <el-table-column label="排序" width="80">
@@ -67,7 +67,7 @@
           <el-table-column label="投放时间" width="180">
             <template slot-scope="{ row }">
               <span v-if="row.startTime || row.endTime">{{ formatDate(row.startTime) }} ~ {{ formatDate(row.endTime) }}</span>
-              <span v-else style="color:var(--adm-text-25)">不限</span>
+              <span v-else class="text-faint">不限</span>
             </template>
           </el-table-column>
           <el-table-column label="状态" width="80">
@@ -87,7 +87,7 @@
       </el-table>
       </div>
 
-      <div class="pagination-wrap" style="margin-top:16px;text-align:right;">
+      <div class="pagination-wrap pager-right">
         <el-pagination
           @current-change="handlePageChange"
           :current-page="page"
@@ -107,7 +107,7 @@
         </el-form-item>
 
         <el-form-item label="类型" prop="bannerType">
-          <el-select v-model="form.bannerType" placeholder="选择类型" style="width:100%;">
+          <el-select v-model="form.bannerType" placeholder="选择类型" class="full-width">
             <el-option label="活动" value="activity" />
             <el-option label="商品" value="product" />
             <el-option label="文章" value="article" />
@@ -124,7 +124,7 @@
             :remote="true"
             :remote-method="searchActivities"
             :loading="activityLoading"
-            style="width:100%"
+            class="full-width"
             clearable
           >
             <el-option v-for="item in activityOptions" :key="item.id" :label="item.title + ' (ID:' + item.id + ')'" :value="item.id" />
@@ -141,7 +141,7 @@
             :remote="true"
             :remote-method="searchProducts"
             :loading="productLoading"
-            style="width:100%"
+            class="full-width"
             clearable
           >
             <el-option v-for="item in productOptions" :key="item.id" :label="item.name + ' (¥' + (item.price/100).toFixed(2) + ')'" :value="item.id" />
@@ -158,7 +158,7 @@
             :remote="true"
             :remote-method="searchArticles"
             :loading="articleLoading"
-            style="width:100%"
+            class="full-width"
             clearable
           >
             <el-option v-for="item in articleOptions" :key="item.id" :label="item.title + ' (ID:' + item.id + ')'" :value="item.id" />
@@ -186,15 +186,15 @@
             <img v-if="form.coverImage" :src="form.coverImage" class="cover-preview" />
             <el-button v-else type="primary" plain>+ 上传封面</el-button>
           </el-upload>
-          <div v-if="form.coverImage" style="margin-top:8px;">
-            <el-image :src="form.coverImage" style="width:200px;height:120px;" fit="cover" />
+          <div v-if="form.coverImage" class="mt-8">
+            <el-image :src="form.coverImage" class="cover-lg" fit="cover" />
           </div>
-          <el-button v-if="form.coverImage" size="mini" type="text" style="margin-left:10px;" @click="form.coverImage = ''">清除</el-button>
-          <div style="margin-top:4px;font-size:12px;color:var(--adm-text-45);">建议尺寸 750×320rpx（约 2.35:1），单张不超过 5MB</div>
+          <el-button v-if="form.coverImage" size="mini" type="text" class="ml-10" @click="form.coverImage = ''">清除</el-button>
+          <div class="form-hint">建议尺寸 750×320rpx（约 2.35:1），单张不超过 5MB</div>
         </el-form-item>
 
         <el-form-item label="排序">
-          <el-input-number v-model="form.sortOrder" :min="0" :max="999" style="width:100px;" />
+          <el-input-number v-model="form.sortOrder" :min="0" :max="999" class="w-100" />
         </el-form-item>
 
         <el-form-item label="投放时间">
@@ -204,7 +204,7 @@
             placeholder="开始时间"
             format="yyyy-MM-dd HH:mm:ss"
             value-format="timestamp"
-            style="margin-right:8px;"
+            class="mr-8"
           />
           <span>至</span>
           <el-date-picker
@@ -213,7 +213,7 @@
             placeholder="结束时间"
             format="yyyy-MM-dd HH:mm:ss"
             value-format="timestamp"
-            style="margin-left:8px;"
+            class="ml-8"
           />
         </el-form-item>
 
@@ -641,5 +641,20 @@ export default {
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
+  margin-bottom: 12px;
 }
+/* == C 批内联清理工具类 == */
+.w-120 { width: 120px; }
+.w-100 { width: 100px; }
+.full-width { width: 100%; }
+.text-faint { color: var(--adm-text-25); }
+.text-muted { color: var(--adm-text-45); }
+.mt-8 { margin-top: 8px; }
+.pager-right { margin-top: 16px; text-align: right; }
+.banner-thumb { width: 50px; height: 35px; object-fit: cover; border-radius: 4px; }
+.cover-lg { width: 200px; height: 120px; }
+.form-hint { margin-top: 4px; font-size: 12px; color: var(--adm-text-45); }
+.ml-10 { margin-left: 10px; }
+.mr-8 { margin-right: 8px; }
+.ml-8 { margin-left: 8px; }
 </style>