feat: change style optimization

Reviewed-on: #13

.env.production

@@ -1,2 +1,5 @@
 # 生产环境
-VITE_API_BASE_URL = https://api.cpms.example.com/admin
+VITE_API_BASE_URL = https://cpmsapi.yunvip123.com
+
+# 是否开启本地调试
+LOCAL_DEBUG=false

package.json

@@ -6,10 +6,15 @@
   "type": "module",
   "scripts": {
     "serve": "vite",
+    "serve:prod": "vite --mode production",
     "build:dev": "vue-tsc --noEmit && vite build --mode development",
     "build:test": "vue-tsc --noEmit && vite build --mode test",
     "build:prod": "vue-tsc --noEmit && vite build --mode production",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "preview": "vite preview",
+    "preview:prod": "pnpm build:prod && vite preview",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint src --ext .js,.ts,.tsx",
     "lint:fix": "eslint src --ext .js,.ts,.tsx --fix",
@@ -42,17 +47,21 @@
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-vue": "^4.5.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vitest/coverage-v8": "2.1.9",
+    "@vue/test-utils": "^2.4.11",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.0.0",
     "husky": "^9.1.7",
+    "jsdom": "^19.0.0",
     "less": "^4.6.4",
     "lint-staged": "^15.0.0",
     "prettier": "^3.0.0",
     "typescript": "^5.3.0",
     "vite": "^5.0.0",
     "vite-plugin-remove-console": "^2.2.0",
+    "vitest": "^2.1.9",
     "vue-tsc": "^2.0.0"
   },
   "lint-staged": {

permission_list.txt

@@ -0,0 +1,57 @@
+# ============================================================
+# CPMS 运营平台 - 权限标识字符串列表
+# 生成规则：
+#   1. 每个页面都有一个 "页面名-查看" 的默认权限
+#   2. 表格操作列中的按钮生成对应操作权限
+#   3. 同一关键字的两个状态按钮（如上架/下架、启用/禁用）合并为一个权限
+#   4. 筛选栏中有"新增"按钮的页面，生成新增权限
+#   5. 标识为英文，附带中文说明（含按钮所在位置）
+# ============================================================
+
+# ─── 赛事管理模块 ─────────────────────────────────────────
+
+events.list.view                  # 赛事列表-查看（页面默认查看权限）
+events.list.toggle_status         # 赛事列表-上架/下架（表格操作列，根据赛事状态显示"上架"或"下架"按钮，合并为一个权限）
+events.regulation.view            # 赛事规程-查看（赛事列表表格中的"赛事规程"列，点击"查看"链接）
+
+events.orders.view                # 订单管理-查看（页面默认查看权限）
+events.orders.refund              # 订单管理-重新退款（表格操作列，退款状态为3时显示"重新退款"按钮）
+
+events.users.view                 # 用户列表-查看（页面默认查看权限）
+events.users.toggle_status        # 用户列表-启用/禁用（表格操作列，根据用户状态显示"启用"或"禁用"按钮，合并为一个权限）
+
+events.banner.view                # Banner配置-查看（页面默认查看权限）
+events.banner.add                 # Banner配置-新增（筛选栏中的"新增"按钮）
+events.banner.edit                # Banner配置-编辑（表格操作列中的"编辑"按钮）
+events.banner.toggle_status       # Banner配置-启用/禁用（表格操作列，根据状态显示"启用"或"禁用"按钮，合并为一个权限）
+events.banner.delete              # Banner配置-删除（表格操作列中的"删除"按钮，红色危险样式）
+
+events.logs.view                  # 赛事操作日志-查看（页面默认查看权限，无操作列按钮）
+
+# ─── 账务管理模块 ─────────────────────────────────────────
+
+finance.withdraw.view             # 提现申请-查看（页面默认查看权限）
+finance.withdraw.audit            # 提现申请-审核（表格操作列，审核状态为"待审核"时显示"审核"按钮）
+
+finance.wallet.view               # 用户钱包-查看（页面默认查看权限）
+finance.wallet.detail             # 用户钱包-查看明细（表格操作列中的"明细"按钮，打开交易明细弹窗）
+
+finance.payments.view             # 支付流水-查看（页面默认查看权限，无操作列按钮，仅展示数据+金额汇总）
+
+finance.reports.view              # 账务报表-查看（页面默认查看权限，无操作列按钮，展示统计卡+趋势图+明细表）
+
+# ─── 系统管理模块 ─────────────────────────────────────────
+
+system.users.view                 # 用户管理-查看（页面默认查看权限）
+system.users.add                  # 用户管理-新增（筛选栏中的"新增"按钮）
+system.users.edit                 # 用户管理-编辑（表格操作列中的"编辑"按钮）
+system.users.toggle_status        # 用户管理-启用/禁用（表格操作列，根据用户状态显示"启用"或"禁用"按钮，合并为一个权限）
+
+system.roles.view                 # 角色权限-查看（页面默认查看权限）
+system.roles.add                  # 角色权限-新增（筛选栏中的"新增角色"按钮）
+system.roles.edit                 # 角色权限-编辑（表格操作列中的"编辑"按钮）
+system.roles.delete               # 角色权限-删除（表格操作列中的"删除"按钮，红色危险样式）
+
+system.logs.view                  # 操作日志-查看（页面默认查看权限，无操作列按钮）
+
+system.params.view                # 参数配置-查看

src/api/withdraw/types.ts

@@ -101,4 +101,6 @@ export interface WithdrawInfoVO {
   auditImg: string;
   /** 审核图片列表 */
   auditImgList: string[];
+  /** 审核结果 */
+  checkMsg: string;
 }

src/components/pageTabs/index.tsx

@@ -165,9 +165,9 @@ const PageTabs = defineComponent({
         case 'other':
           props.onCloseOther?.(props.activeKey);
           break;
-        case 'all':
-          props.onCloseAll?.();
-          break;
+        // case 'all':
+        //   props.onCloseAll?.();
+        //   break;
       }
     };
 
@@ -278,7 +278,7 @@ const PageTabs = defineComponent({
                 {renderBatchMenuItem('left', renderAiIcon(LuPanelLeftClose), '关闭左侧标签页')}
                 {renderBatchMenuItem('right', renderAiIcon(LuPanelRightClose), '关闭右侧标签页')}
                 {renderBatchMenuItem('other', renderAiIcon(LuCopyX), '关闭其它标签页')}
-                {renderBatchMenuItem('all', renderAiIcon(LuListX), '关闭全部标签页')}
+                {/* {renderBatchMenuItem('all', renderAiIcon(LuListX), '关闭全部标签页')} */}
               </Menu>
             ),
           }}

src/layouts/BasicLayout.tsx

@@ -296,7 +296,7 @@ export default defineComponent({
             </div>
           </Content>
 
-          <Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
+          {/* <Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer> */}
         </Layout>
 
         {/* 修改密码弹窗 */}

src/pages/events/list/components/EventDetailModal.module.less

@@ -28,12 +28,29 @@
   }
 
   .desc {
+    :global(.ant-descriptions-view table) {
+      table-layout: fixed;
+      width: 100%;
+    }
+
     :global(.ant-descriptions-item-label) {
       width: 110px;
       color: rgba(0, 0, 0, 0.65);
     }
   }
 
+  // 首列内容区加宽（省市区、公开活动、创建时间等）
+  .wideCol:global(.ant-descriptions-item-content) {
+    width: 38%;
+    min-width: 200px;
+  }
+
+  // 较长 label 加宽且不换行（class 同时挂在 label/content 上，需用复合选择器）
+  .wideLabel:global(.ant-descriptions-item-label) {
+    width: 132px;
+    white-space: nowrap;
+  }
+
   // Item 的 class 会同时挂在 label/content 两个同级 td/th 上，不能用后代选择器
   .statCell:global(.ant-descriptions-item-content) {
     min-width: 60px;
@@ -66,13 +83,37 @@
   }
 
   .divisionList {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+  }
+
+  .coverWrapper {
     display: flex;
-    flex-direction: column;
-    gap: 6px;
+    justify-content: center;
+    align-items: center;
+    background: #f5f5f5;
+    border-radius: 8px;
+    padding: 16px;
+
+    :global(.ant-image) {
+      max-width: 100%;
+    }
   }
 
   .divisionItem {
+    display: inline-flex;
+    align-items: center;
     font-size: 13px;
     color: rgba(0, 0, 0, 0.65);
+    padding: 4px 12px;
+    background: #f5f5f5;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: #1677ff;
+      background: #e6f4ff;
+    }
   }
 }

src/pages/events/list/components/EventDetailModal.tsx

@@ -81,6 +81,13 @@ const ID_CARD_IMG_COLUMN: any = {
     record ? renderIdImages(record.idCardImgList || [], record.idCardImg || '') : <span>--</span>,
 };
 
+type ConditionalColumnKey = 'isRequireIdCardNo' | 'isRequireIdCardImg';
+
+const CONDITIONAL_PLAYER_COLUMNS: { key: ConditionalColumnKey; column: any }[] = [
+  { key: 'isRequireIdCardNo', column: ID_CARD_COLUMN },
+  { key: 'isRequireIdCardImg', column: ID_CARD_IMG_COLUMN },
+];
+
 export default defineComponent({
   name: 'EventDetailModal',
   props: {
@@ -94,12 +101,12 @@ export default defineComponent({
     const [detailLoading, setDetailLoading] = useState(false);
 
     /** 动态列：根据赛事是否要求证件号/证件图片决定显示 */
-    const playerColumns = computed(() => {
-      const cols = [...BASE_PLAYER_COLUMNS];
-      if (detail.value?.isRequireIdCardNo === '1') cols.push(ID_CARD_COLUMN);
-      if (detail.value?.isRequireIdCardImg === '1') cols.push(ID_CARD_IMG_COLUMN);
-      return cols;
-    });
+    const playerColumns = computed(() => [
+      ...BASE_PLAYER_COLUMNS,
+      ...CONDITIONAL_PLAYER_COLUMNS.filter(({ key }) => detail.value?.[key] === '1').map(
+        ({ column }) => column,
+      ),
+    ]);
 
     // ===== 每个组别的选手数据（key = categoryId） =====
     const categoryPlayers = ref<Record<string, TournamentAdminInfoSignupVO[]>>({});
@@ -181,7 +188,7 @@ export default defineComponent({
       <Modal
         visible={props.visible}
         title="查看详情"
-        width={900}
+        width={980}
         onCancel={props.onClose}
         footer={null}
         centered
@@ -198,26 +205,32 @@ export default defineComponent({
             <div class={styles.section}>
               <div class={styles.sectionTitle}>基础信息</div>
               <Descriptions size="small" bordered column={3} class={styles.desc}>
-                <Descriptions.Item label="赛事名称">{detail.value.name}</Descriptions.Item>
-                <Descriptions.Item label="赛事时间" span={2}>
+                <Descriptions.Item label="赛事名称" span={2}>
+                  {detail.value.name}
+                </Descriptions.Item>
+                <Descriptions.Item label="赛事时间">
                   {detail.value.startTimeBegin} 至 {detail.value.startTimeEnd}
                 </Descriptions.Item>
 
                 <Descriptions.Item label="赛事说明" span={3}>
-                  {detail.value.descr}
+                  <div style={{ whiteSpace: 'pre-wrap', maxHeight: '280px', overflowY: 'auto' }}>
+                    {detail.value.descr}
+                  </div>
                 </Descriptions.Item>
 
-                <Descriptions.Item label="报名起止时间" span={3}>
+                <Descriptions.Item label="报名起止时间" span={3} class={styles.wideLabel}>
                   {signupTimeDisplay(detail.value.signupTimeBegin, detail.value.signupTimeEnd)}
                 </Descriptions.Item>
 
-                <Descriptions.Item label="省市区">{detail.value.venueArea}</Descriptions.Item>
+                <Descriptions.Item label="省市区" class={styles.wideCol}>
+                  {detail.value.venueArea}
+                </Descriptions.Item>
                 <Descriptions.Item label="地点">{detail.value.venue}</Descriptions.Item>
                 <Descriptions.Item label="场地编号" class={styles.statCell}>
                   {detail.value.venueNo || '--'}
                 </Descriptions.Item>
 
-                <Descriptions.Item label="公开活动">
+                <Descriptions.Item label="公开活动" class={styles.wideCol}>
                   {formatPublic(detail.value.isPublic)}
                 </Descriptions.Item>
                 <Descriptions.Item label="证件号">
@@ -227,12 +240,16 @@ export default defineComponent({
                   {formatYN(detail.value.isRequireIdCardImg)}
                 </Descriptions.Item>
 
-                <Descriptions.Item label="创建时间">{detail.value.createTime}</Descriptions.Item>
+                <Descriptions.Item label="创建时间" class={styles.wideCol}>
+                  {detail.value.createTime}
+                </Descriptions.Item>
                 <Descriptions.Item label="创建人" span={2}>
                   {detail.value.createNickname}
                 </Descriptions.Item>
 
-                <Descriptions.Item label="报名人数">{detail.value.signupCount}</Descriptions.Item>
+                <Descriptions.Item label="报名人数" class={styles.wideCol}>
+                  {detail.value.signupCount}
+                </Descriptions.Item>
                 <Descriptions.Item label="退赛人数">{detail.value.dropoutCount}</Descriptions.Item>
                 <Descriptions.Item
                   label="最大人数"
@@ -241,7 +258,7 @@ export default defineComponent({
                   {detail.value.totalLimit || '--'}
                 </Descriptions.Item>
 
-                <Descriptions.Item label="总对阵数">
+                <Descriptions.Item label="总对阵数" class={styles.wideCol}>
                   {detail.value.matchTotalCount}
                 </Descriptions.Item>
                 <Descriptions.Item label="已完成对阵数" span={2}>
@@ -253,11 +270,13 @@ export default defineComponent({
             {/* ===== 封面 ===== */}
             <div class={styles.section}>
               <div class={styles.sectionTitle}>封面</div>
-              <Image
-                style={{ maxHeight: '380px' }}
-                src={detail.value.img || defaultCover}
-                fallback={defaultCover}
-              />
+              <div class={styles.coverWrapper}>
+                <Image
+                  style={{ maxHeight: '380px' }}
+                  src={detail.value.img || defaultCover}
+                  fallback={defaultCover}
+                />
+              </div>
             </div>
 
             {/* ===== 赛事公告 ===== */}

src/pages/events/list/components/EventRegulationModal.module.less

@@ -25,6 +25,8 @@
     padding: 12px 16px;
     border-radius: 4px;
     border: 1px solid #f0f0f0;
+    max-height: 360px;
+    overflow-y: auto;
   }
 
   .imageGrid {

src/pages/events/list/index.tsx

@@ -89,7 +89,7 @@ export default defineComponent({
     const renderAction = (record: any) => {
       const status = record.status;
 
-      if (status === '0' || status === '1') {
+      if (['0', '1', '2'].includes(status)) {
         return (
           <Space>
             <Button type="link" size="small" onClick={() => openDetailModal(record)}>

src/pages/events/orders/components/OrderDetailModal.tsx

@@ -58,11 +58,7 @@ const PLAYER_COLUMNS = [
     key: 'idCardImg',
     width: 170,
     customRender: ({ record }: { record: TournamentAdminOrderInfoPageVO }) => {
-      const urls = record.idCardImgList?.length
-        ? record.idCardImgList
-        : record.idCardImg
-          ? [record.idCardImg]
-          : [];
+      const urls = record.idCardImgList || [];
       if (!urls.length) return <span>--</span>;
       return (
         <Space>

src/pages/finance/reports/index.tsx

@@ -180,7 +180,7 @@ export default defineComponent({
         },
         {
           key: 'totalBalance',
-          label: '平台余额（所有用户余额总和）',
+          label: '平台余额（所有用户余额总和 = 总收入 - 提现金额）',
           value: s.totalBalance,
           bgColor: '#e6f4ff',
           accentColor: '#1677ff',
@@ -224,7 +224,11 @@ export default defineComponent({
                 <div class={styles.statValue} style={{ color: item.accentColor }}>
                   ¥{formatMoney(item.value)}
                 </div>
-                {/* 趋势文字暂时隐藏 */}
+                {/* {item.key === 'totalBalance' && (
+                  <div class={styles.statDesc} style={{ color: 'rgba(0, 0, 0, 0.45)' }}>
+                    = 总收入 - 提现金额
+                  </div>
+                )} */}
               </div>
             ))}
           </div>

src/pages/finance/reports/model/useReportsModel.ts

@@ -126,7 +126,9 @@ export function useReportsModel() {
   // ===== 图表数据 =====
   const chartData = computed(() => {
     const list = data.value?.monthList || [];
-    return list.map((item) => ({
+    // 按月份升序排列，确保图表 X 轴时间顺序正确
+    const sorted = [...list].sort((a, b) => a.month.localeCompare(b.month));
+    return sorted.map((item) => ({
       month: dayjs(item.month).format('MM月'),
       order: toNumber(item.orderAmount),
       refund: toNumber(item.refundAmount),

src/pages/finance/wallet/index.tsx

@@ -160,7 +160,8 @@ export default defineComponent({
                     placeholder="请输入"
                     style={{ width: '140px' }}
                     value={filterForm.minBalance || undefined}
-                    precision={0}
+                    precision={2}
+                    step={0.01}
                     min={0}
                     controls={false}
                     onUpdate:value={(val: any) =>

src/pages/finance/withdraw/components/WithdrawDetailModal.module.less

@@ -96,16 +96,12 @@
     min-width: 0;
     color: rgba(0, 0, 0, 0.85);
     font-size: 13px;
+    font-weight: 600;
     word-break: break-all;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .descValueBold {
-    font-weight: 600;
-    color: rgba(0, 0, 0, 0.85);
-  }
-
   .auditImgList {
     display: flex;
     gap: 5px;

src/pages/finance/withdraw/components/WithdrawDetailModal.tsx

@@ -150,17 +150,17 @@ export default defineComponent({
       }
     };
 
-    const renderItem = (label: string, value: any, isBold = false) => (
+    const renderItem = (label: string, value: any) => (
       <div class={styles.descItem}>
         <span class={styles.descLabel}>{label}</span>
-        <span class={[styles.descValue, isBold ? styles.descValueBold : '']}>{value || '--'}</span>
+        <span class={styles.descValue}>{value || '--'}</span>
       </div>
     );
 
     /** 渲染内容区（加载完成后） */
     const renderContent = () => {
       const d = detail.value!;
-      const bankCardTypeLabel = d.bankCardType === 1 ? '个人' : d.bankCardType || '--';
+      const bankCardTypeLabel = d.bankCardType == 1 ? '个人' : d.bankCardType || '--';
       const isPending = d.auditStatus == 0;
 
       return (
@@ -175,12 +175,12 @@ export default defineComponent({
               {renderItem('申请时间：', d.createDate)}
               {renderItem('打款类型：', d.withdrawType)}
               <div style="display: contents;" />
-              {renderItem('提现金额：', `¥${d.withdrawAmount}`, true)}
+              {renderItem('提现金额：', `¥${d.withdrawAmount}`)}
               {renderItem('费率：', `${(Number(d.feeRate) * 100).toFixed(2)}%`)}
               {renderItem('手续费：', `¥${d.feeAmount}`)}
-              {renderItem('到账金额：', `¥${d.receivedAmount}`, true)}
-              {renderItem('审核状态：', getAuditStatusText(d.auditStatus), true)}
-              {renderItem('列账状态：', getPayStatusText(d.payStatus))}
+              {renderItem('到账金额：', `¥${d.receivedAmount}`)}
+              {renderItem('审核状态：', getAuditStatusText(d.auditStatus))}
+              {renderItem('到账状态：', getPayStatusText(d.payStatus))}
             </div>
           </div>
 
@@ -267,6 +267,7 @@ export default defineComponent({
                 <div class={styles.infoColumn}>
                   {renderItem('审核时间：', d.auditDate)}
                   {renderItem('审核人：', d.auditNickname)}
+                  {d.checkMsg && renderItem('审核内容：', d.checkMsg)}
                   <div class={styles.descItem}>
                     <span class={styles.descLabel}>审核图片：</span>
                     {d.auditImgList?.length ? (

src/pages/login/index.tsx

@@ -130,7 +130,7 @@ export default defineComponent({
               </div>
             </div>
 
-            <div class={styles.brandFooter}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</div>
+            {/* <div class={styles.brandFooter}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</div> */}
           </div>
         </div>
 
@@ -186,7 +186,7 @@ export default defineComponent({
               </FormItem>
             </Form>
 
-            <div class={styles.loginFooter}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</div>
+            {/* <div class={styles.loginFooter}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</div> */}
           </div>
         </div>
       </div>

src/pages/system/params/components/ParamFormModal.tsx

@@ -60,15 +60,15 @@ export default defineComponent({
     const handleSubmit = async () => {
       try {
         await formRef.value?.validate();
-      } catch {
-        return;
-      }
 
-      props.onSave({
-        paramCode: formData.paramCode,
-        paramValue: formData.paramValue,
-        remark: formData.remark,
-      });
+        props.onSave({
+          paramCode: formData.paramCode,
+          paramValue: formData.paramValue,
+          remark: formData.remark,
+        });
+      } catch {
+        // 校验未通过，Form 已展示错误，无需处理
+      }
     };
 
     /** 关闭 */

src/pages/system/params/index.module.less

@@ -1,36 +1,33 @@
-// 参数值单元格：文字最多 2 行省略，末尾带"查看"链接
-:global {
-  .param-value-cell {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    width: 100%;
-    cursor: default;
-  }
+.cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  cursor: default;
+}
 
-  .param-value-text {
-    flex: 1;
-    min-width: 0;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.5;
-    word-break: break-all;
-    color: rgba(0, 0, 0, 0.88);
-  }
+.text {
+  flex: 1;
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+  word-break: break-all;
+  color: rgba(0, 0, 0, 0.88);
+}
 
-  .param-value-view {
-    flex-shrink: 0;
-    color: #1677ff;
-    cursor: pointer;
-    user-select: none;
-    line-height: 1.5;
-    white-space: nowrap;
+.view {
+  flex-shrink: 0;
+  color: #1677ff;
+  cursor: pointer;
+  user-select: none;
+  line-height: 1.5;
+  white-space: nowrap;
 
-    &:hover {
-      opacity: 0.85;
-    }
+  &:hover {
+    opacity: 0.85;
   }
 }

src/pages/system/params/index.tsx

@@ -5,7 +5,7 @@ import { saveParam, updateParam } from './model/services';
 import { useState, useThrottleFn, useContainerSize, useEffect } from '@/hooks';
 import ParamFormModal from './components/ParamFormModal';
 import pageStyles from '@/assets/styles/pageLayout.module.less';
-import './index.module.less';
+import cellStyles from './index.module.less';
 
 /**
  * 参数值单元格：最多 2 行截断，溢出时显示"查看"按钮
@@ -38,12 +38,12 @@ const ParamValueCell = defineComponent({
     return () => {
       const raw = props.text;
       return (
-        <div class="param-value-cell">
-          <div ref={textRef} class="param-value-text">
+        <div class={cellStyles.cell}>
+          <div ref={textRef} class={cellStyles.text}>
             {raw}
           </div>
           {overflow.value ? (
-            <span class="param-value-view" onClick={() => setModalOpen(true)}>
+            <span class={cellStyles.view} onClick={() => setModalOpen(true)}>
               查看
             </span>
           ) : null}

src/types/china-area-data.d.ts

@@ -1,4 +1,4 @@
-declare module 'china-area-data' {
+declare module 'china-area-data/data.json' {
   const data: Record<string, Record<string, string>>;
   export default data;
 }

src/utils/areaData.ts

@@ -1,4 +1,4 @@
-import areaData from 'china-area-data';
+import areaData from 'china-area-data/data.json';
 
 export interface CascadeOption {
   value: string;