From ccebecaed83acdb33b52d70acdb0ca8c1ec3df4a Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Thu, 28 Aug 2025 15:02:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor(about):=20=E5=B0=86v-bind=20css?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=8A=9F=E8=83=BD=E6=8A=BD=E7=A6=BB=E4=B8=BA?=
 =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将原本在about.vue中的v-bind css变量相关代码抽离到单独的VBindCss组件中，提高代码可维护性
---
 src/pages/about/about.vue               | 25 ++---------------------
 src/pages/about/components/VBindCss.vue | 27 +++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 23 deletions(-)
 create mode 100644 src/pages/about/components/VBindCss.vue

diff --git a/src/pages/about/about.vue b/src/pages/about/about.vue
index a0c17a2..d05ffff 100644
--- a/src/pages/about/about.vue
+++ b/src/pages/about/about.vue
@@ -10,6 +10,7 @@
 import { LOGIN_PAGE } from '@/router/config'
 import { tabbarStore } from '@/tabbar/store'
 import RequestComp from './components/request.vue'
+import VBindCss from './components/VBindCss.vue'
 
 // 奇怪：同样的代码放在 vue 里面不会校验到错误，放在 .ts 文件里面会校验到错误
 // const testOxlint = (name: string) => {
@@ -73,16 +74,6 @@ onReady(() => {
 onShow(() => {
   console.log('onShow uniKuRoot exposeRef', uniKuRoot.value?.exposeRef)
 })
-
-const testBindCssVariable = ref('red')
-function changeTestBindCssVariable() {
-  if (testBindCssVariable.value === 'red') {
-    testBindCssVariable.value = 'green'
-  }
-  else {
-    testBindCssVariable.value = 'red'
-  }
-}
 </script>
 
 <template root="uniKuRoot">
@@ -100,12 +91,7 @@ function changeTestBindCssVariable() {
       设置tabbarBadge
     </button>
     <RequestComp />
-    <button class="mt-4 w-60 text-center" @click="changeTestBindCssVariable">
-      toggle v-bind css变量
-    </button>
-    <view class="test-css text-center">
-      测试v-bind css变量的具体文案
-    </view>
+    <VBindCss />
     <view class="mb-6 h-1px bg-#eee" />
     <view class="text-center">
       <button type="primary" size="mini" class="w-160px" @click="gotoAlova">
@@ -135,10 +121,3 @@ function changeTestBindCssVariable() {
     <view class="h-6" />
   </view>
 </template>
-
-<style lang="scss" scoped>
-.test-css {
-  color: v-bind(testBindCssVariable);
-  font-size: 24px;
-}
-</style>
diff --git a/src/pages/about/components/VBindCss.vue b/src/pages/about/components/VBindCss.vue
new file mode 100644
index 0000000..fae22d9
--- /dev/null
+++ b/src/pages/about/components/VBindCss.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+const testBindCssVariable = ref('red')
+function changeTestBindCssVariable() {
+  if (testBindCssVariable.value === 'red') {
+    testBindCssVariable.value = 'green'
+  }
+  else {
+    testBindCssVariable.value = 'red'
+  }
+}
+</script>
+
+<template>
+  <button class="mt-4 w-60 text-center" @click="changeTestBindCssVariable">
+    toggle v-bind css变量
+  </button>
+  <view class="test-css my-2 text-center">
+    测试v-bind css变量的具体文案
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.test-css {
+  color: v-bind(testBindCssVariable);
+  font-size: 24px;
+}
+</style>