ArkUI 资源规范：颜色和文案要成组维护

资源规范的重点不是把所有内容都塞进 JSON，而是让同一类资源成组维护。深浅色要保证 base/dark 同名颜色 key，国际化要保证 base/en_US/fr_FR 同名文案 key。

本篇边界

这篇只讲 color.json、string.json、资源限定词和 key 命名。Demo 不做运行时扫描资源文件，不做全局语言切换，不接在线翻译，也不扩展成复杂设计系统。

交互预期

• 页面颜色全部通过 app.color.resource_spec_* 资源读取。
• 订单文案全部通过 app.string.resource_spec_* 资源读取。
• 点击“查看本页资源规则”后，下方状态文本会展示本页验收规则。

资源配置

颜色资源在 resources/base/element/color.json 与 resources/dark/element/color.json 中保持同名 key，例如：

{
  "name": "resource_spec_brand",
  "value": "#2563EB"
}

文案资源在 resources/base/element/string.json、resources/en_US/element/string.json、resources/fr_FR/element/string.json 中保持同名 key，例如：

{
  "name": "resource_spec_order_title",
  "value": "订单中心"
}

完整示例代码

@Entry
@Component
struct ArkUIResourceSpecDemo {
  @State hasChecked: boolean = false

  @Builder
  colorSectionTitle() {
    Column({ space: 6 }) {
      Text($r('app.string.resource_spec_color_title'))
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor($r('app.color.resource_spec_text_primary'))
      Text($r('app.string.resource_spec_color_desc'))
        .fontSize(13)
        .fontColor($r('app.color.resource_spec_text_secondary'))
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  stringSectionTitle() {
    Column({ space: 6 }) {
      Text($r('app.string.resource_spec_string_title'))
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor($r('app.color.resource_spec_text_primary'))
      Text($r('app.string.resource_spec_string_desc'))
        .fontSize(13)
        .fontColor($r('app.color.resource_spec_text_secondary'))
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  namingSectionTitle() {
    Column({ space: 6 }) {
      Text($r('app.string.resource_spec_naming_title'))
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor($r('app.color.resource_spec_text_primary'))
      Text($r('app.string.resource_spec_naming_desc'))
        .fontSize(13)
        .fontColor($r('app.color.resource_spec_text_secondary'))
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  validationSectionTitle() {
    Column({ space: 6 }) {
      Text($r('app.string.resource_spec_validation_title'))
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor($r('app.color.resource_spec_text_primary'))
      Text($r('app.string.resource_spec_validation_desc'))
        .fontSize(13)
        .fontColor($r('app.color.resource_spec_text_secondary'))
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  brandColorRow() {
    Row({ space: 12 }) {
      Blank()
        .width(42)
        .height(42)
        .backgroundColor($r('app.color.resource_spec_brand'))
        .borderRadius(8)
      Column({ space: 4 }) {
        Text($r('app.string.resource_spec_color_brand_label'))
          .fontSize(15)
          .fontWeight(FontWeight.Bold)
          .fontColor($r('app.color.resource_spec_text_primary'))
        Text('resource_spec_brand')
          .fontSize(12)
          .fontColor($r('app.color.resource_spec_text_secondary'))
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
  }

  @Builder
  surfaceColorRow() {
    Row({ space: 12 }) {
      Blank()
        .width(42)
        .height(42)
        .backgroundColor($r('app.color.resource_spec_surface'))
        .border({ width: 1, color: $r('app.color.resource_spec_border') })
        .borderRadius(8)
      Column({ space: 4 }) {
        Text($r('app.string.resource_spec_color_surface_label'))
          .fontSize(15)
          .fontWeight(FontWeight.Bold)
          .fontColor($r('app.color.resource_spec_text_primary'))
        Text('resource_spec_surface')
          .fontSize(12)
          .fontColor($r('app.color.resource_spec_text_secondary'))
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
  }

  @Builder
  textColorRow() {
    Row({ space: 12 }) {
      Blank()
        .width(42)
        .height(42)
        .backgroundColor($r('app.color.resource_spec_text_primary'))
        .borderRadius(8)
      Column({ space: 4 }) {
        Text($r('app.string.resource_spec_color_text_label'))
          .fontSize(15)
          .fontWeight(FontWeight.Bold)
          .fontColor($r('app.color.resource_spec_text_primary'))
        Text('resource_spec_text_primary')
          .fontSize(12)
          .fontColor($r('app.color.resource_spec_text_secondary'))
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
  }

  @Builder
  colorResourcePanel() {
    Column({ space: 14 }) {
      this.brandColorRow()
      this.surfaceColorRow()
      this.textColorRow()
      Text($r('app.string.resource_spec_color_key_note'))
        .fontSize(12)
        .fontColor($r('app.color.resource_spec_text_secondary'))
        .lineHeight(18)
    }
    .width('100%')
    .padding(16)
    .borderRadius(14)
    .backgroundColor($r('app.color.resource_spec_panel_background'))
    .border({ width: 1, color: $r('app.color.resource_spec_border') })
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  stringResourcePanel() {
    Column({ space: 12 }) {
      Text($r('app.string.resource_spec_order_title'))
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .fontColor($r('app.color.resource_spec_text_primary'))
      Text($r('app.string.resource_spec_order_empty'))
        .fontSize(14)
        .fontColor($r('app.color.resource_spec_text_secondary'))
        .lineHeight(22)
      Text($r('app.string.resource_spec_order_action'))
        .fontSize(14)
        .fontColor($r('app.color.resource_spec_button_text'))
        .padding({ left: 12, right: 12, top: 8, bottom: 8 })
        .backgroundColor($r('app.color.resource_spec_brand'))
        .borderRadius(8)
      Text($r('app.string.resource_spec_string_key_note'))
        .fontSize(12)
        .fontColor($r('app.color.resource_spec_text_secondary'))
        .lineHeight(18)
    }
    .width('100%')
    .padding(16)
    .borderRadius(14)
    .backgroundColor($r('app.color.resource_spec_panel_background'))
    .border({ width: 1, color: $r('app.color.resource_spec_border') })
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  namingPanel() {
    Column({ space: 10 }) {
      Text('resource_spec_page_background')
        .fontSize(13)
        .fontColor($r('app.color.resource_spec_text_primary'))
      Text('resource_spec_order_title')
        .fontSize(13)
        .fontColor($r('app.color.resource_spec_text_primary'))
      Text('resource_spec_order_action')
        .fontSize(13)
        .fontColor($r('app.color.resource_spec_text_primary'))
    }
    .width('100%')
    .padding(14)
    .backgroundColor($r('app.color.resource_spec_chip_background'))
    .borderRadius(10)
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text($r('app.string.resource_spec_page_title'))
          .fontSize(26)
          .fontWeight(FontWeight.Bold)
          .fontColor($r('app.color.resource_spec_text_primary'))
          .width('100%')
        Text($r('app.string.resource_spec_page_desc'))
          .fontSize(14)
          .fontColor($r('app.color.resource_spec_text_secondary'))
          .lineHeight(22)
          .width('100%')

        this.colorSectionTitle()
        this.colorResourcePanel()

        this.stringSectionTitle()
        this.stringResourcePanel()

        this.namingSectionTitle()
        this.namingPanel()

        Button($r('app.string.resource_spec_run_check'))
          .height(46)
          .width('100%')
          .fontSize(15)
          .fontColor($r('app.color.resource_spec_button_text'))
          .backgroundColor($r('app.color.resource_spec_brand'))
          .onClick(() => {
            this.hasChecked = true
          })

        Text(this.hasChecked ? $r('app.string.resource_spec_feedback_checked') : $r('app.string.resource_spec_feedback_initial'))
          .width('100%')
          .fontSize(14)
          .fontColor($r('app.color.resource_spec_text_primary'))
          .lineHeight(22)
          .padding(12)
          .backgroundColor($r('app.color.resource_spec_chip_background'))
          .borderRadius(10)

        this.validationSectionTitle()
      }
      .width('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.resource_spec_page_background'))
  }
}