novel-front-app/pages_order/components/novel/README.md

# 小说阅读相关组件

本目录包含小说阅读页面使用的各种公共组件，所有组件都支持暗色主题模式。

## 组件列表

### 1. 订阅弹窗 (subscriptionPopup.vue)

中心弹出的订阅章节提示弹窗。

#### 使用方法

```html
<template>
  <subscriptionPopup ref="subscriptionPopup" @subscribe="handleSubscribe"/>
</template>

<script>
import subscriptionPopup from 'pages_order/components/novel/subscriptionPopup.vue'

export default {
  components: {
    subscriptionPopup
  },
  methods: {
    showSubscriptionPopup() {
      this.$refs.subscriptionPopup.open()
    },
    handleSubscribe() {
      // 处理订阅事件
    }
  }
}
</script>
```

### 2. 支付弹窗 (paymentPopup.vue)

从底部弹出的支付方式选择弹窗。

#### 使用方法

```html
<template>
  <paymentPopup ref="paymentPopup" @subscribe="handleSubscribe" @close="handleClose"/>
</template>

<script>
import paymentPopup from 'pages_order/components/novel/paymentPopup.vue'

export default {
  components: {
    paymentPopup
  },
  methods: {
    showPaymentPopup() {
      this.$refs.paymentPopup.open()
    },
    handleSubscribe() {
      // 处理订阅事件
    },
    handleClose() {
      // 处理关闭事件
    }
  }
}
</script>
```

### 3. 章节目录弹窗 (chapterPopup.vue)

显示小说章节列表的弹窗。

#### 使用方法

```html
<template>
  <chapterPopup ref="chapterPopup"/>
</template>

<script>
import chapterPopup from 'pages_order/components/novel/chapterPopup.vue'

export default {
  components: {
    chapterPopup
  },
  methods: {
    showChapterList() {
      this.$refs.chapterPopup.open()
    }
  }
}
</script>
```

### 4. 评分弹窗 (novelVotePopup.vue)

用于评价小说的弹窗组件。

## 暗色主题支持

所有组件都支持暗色主题模式，当系统切换到暗色模式或用户手动切换时，组件会自动应用暗色样式。

### 主题切换

主题的状态保存在Vuex中，可以通过以下方式切换：

```js
// 切换主题模式
this.$store.commit('toggleThemeMode')

// 设置为特定模式
this.$store.commit('setThemeMode', 'dark') // 或 'light'

// 获取当前主题模式
const isDarkMode = this.$store.getters.isDarkMode
```

### 使用主题混入器

为了方便在组件中使用主题相关功能，可以引入主题混入器：

```js
import themeMixin from '@/mixins/themeMode.js'

export default {
  mixins: [themeMixin],
  
  // 然后可以直接使用以下属性和方法
  created() {
    console.log(this.isDarkMode) // 是否为暗色模式
    console.log(this.currentTheme) // 'light' 或 'dark'
    
    // 切换主题
    this.toggleThemeMode()
  }
}
```

详细的文档请参考 `doc/dark-mode-guide.md`。