refactor(JoinFamily): 将内联样式提取到less文件并优化组件结构

将内联样式提取到单独的less文件中以提高可维护性
优化组件结构并使用语义化的类名
统一样式管理并减少重复代码

+/* JoinFamily/index.less */
+
+.motto-input-container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.motto-input-box {
+  width: 5rem;
+  height: 5rem;
+  text-align: center;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.motto-input {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: 1.5rem;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.identity-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.identity-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.identity-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+}
+
+.identity-item-selected {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+.identity-item-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.identity-item-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
\ No newline at end of file

@@ -11,11 +11,11 @@
         请输入家人提供的家训口令，加入家庭一起参与健康挑战
       </view>
       <!-- Input boxes -->
-      <view class="flex justify-center gap-3 w-full mb-6">
+      <view class="motto-input-container">
         <view
           v-for="(char, index) in mottoChars"
           :key="index"
-          class="w-16 h-16 border border-gray-500 rounded-md flex items-center justify-center"
+          class="motto-input-box"
           :style="{
             borderColor: focusedIndex === index ? '#3b82f6' : '#d1d5db'
           }"
@@ -28,7 +28,7 @@
             @keydown="(e) => handleKeyDown(index, e)"
             @focus="focusedIndex = index"
             @blur="handleBlur(index)"
-            class="w-full h-full text-center text-xl bg-transparent outline-none"
+            class="motto-input"
           />
         </view>
       </view>
@@ -38,36 +38,22 @@
       </view>
       <!-- Role selection -->
       <view class="mb-6">
-        <h3 class="text-base font-medium mb-4 border-t border-gray-300 pt-4">
+        <h3 class="identity-title">
           选择您的身份
         </h3>
-        <view class="grid grid-cols-2 gap-3">
+        <view class="identity-grid">
           <view
             v-for="role in familyRoles"
             :key="role.id"
             :class="[
-              'flex items-center justify-center p-3 border rounded-md',
-              selectedRole === role.id
-                ? 'border-blue-500 bg-blue-50'
-                : 'border-gray-200'
+              'identity-item',
+              { 'identity-item-selected': selectedRole === role.id }
             ]"
             @click="selectedRole = role.id"
           >
-            <view class="flex flex-col items-center">
-              <My
-                size="20"
-                :class="[
-                  'mb-1',
-                  selectedRole === role.id ? 'text-blue-500' : 'text-gray-400'
-                ]"
-              />
-              <span
-                :class="[
-                  selectedRole === role.id ? 'text-blue-500' : 'text-gray-600'
-                ]"
-              >
-                {{ role.label }}
-              </span>
+            <view class="identity-item-content">
+              <My size="20" class="identity-item-icon" />
+              <span class="identity-item-label">{{ role.label }}</span>
             </view>
           </view>
         </view>
@@ -167,3 +153,6 @@ const handleJoinFamily = () => {
   }
 };
 </script>
+<style lang="less">
+@import './index.less';
+</style>