Merge branch 'refs/heads/pr' into pr-159

# Conflicts: # package-lock.json # src/App.vue # src/pages/article/PracticeArticles.vue # src/stores/setting.ts
2025-11-16 22:37:01 +08:00
parent 68ee90a3ab def6b2495a
commit 31cd7a992a
51 changed files with 3301 additions and 504 deletions
--- a/src/components/BackIcon.vue
+++ b/src/components/BackIcon.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">

 import BaseIcon from "@/components/BaseIcon.vue";
-import {useAttrs} from "vue";
-import router from "@/router.ts";
+import { useAttrs } from "vue";
+import { useNav } from "@/utils";

 const attrs = useAttrs()
+const router = useNav()

 function onClick() {
  if (!attrs.onClick) {
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -62,7 +62,7 @@ defineEmits(['click'])
  color: white;

  & + .base-button {
-    margin-left: var(--space);
+    margin-left: 1rem;
  }

  .loading {
@@ -76,8 +76,8 @@ defineEmits(['click'])
  }

  &.small {
-    border-radius: 0.2rem;
-    padding: 0 0.8rem;
+    border-radius: 0.3rem;
+    padding: 0 0.6rem;
    height: 1.6rem;
    font-size: .8rem;
  }
@@ -86,6 +86,7 @@ defineEmits(['click'])
    padding: 0 1.3rem;
    height: 2.4rem;
    font-size: 0.9rem;
+    border-radius: .5rem;
  }

  & > span {
@@ -97,19 +98,19 @@ defineEmits(['click'])
    }
  }

-  &:hover:not(.disabled) {
-    opacity: .6;
-  }
-
  &.primary {
    background: var(--btn-primary);
+
+    &:hover:not(.disabled) {
+      opacity: 0.6;
+    }
  }

  &.link {
    border-radius: 0;
    border-bottom: 2px solid transparent;

-    &:hover {
+    &:hover:not(.disabled) {
      border-bottom: 2px solid var(--color-font-2);
    }
  }
@@ -118,11 +119,20 @@ defineEmits(['click'])
    background: var(--btn-info);
    border: 1px solid var(--color-main-text);
    color: var(--color-main-text);
+
+    &:hover:not(.disabled) {
+      opacity: 0.6;
+    }
  }

  &.orange {
    background: #FACC15;
    color: black;
+
+    &:hover:not(.disabled) {
+      background: #fbe27e;
+      color: rgba(0, 0, 0, 0.6);
+    }
  }

  &.active {
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+import BackIcon from "@/components/BackIcon.vue";
+import { useAttrs } from "vue";
+
+interface IProps {
+  title: string;
+  showBackIcon?: boolean;
+}
+
+withDefaults(defineProps<IProps>(), {
+  title: '',
+  showBackIcon: true,
+})
+
+
+const attrs = useAttrs()
+</script>
+
+<template>
+  <div class="mb-3 text-xl font-bold relative min-h-8">
+    <BackIcon class="z-2 relative" v-bind="attrs" v-if="showBackIcon" />
+    <span class="absolute text-center w-full left-0" @click.stop>{{ title }}</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
--- a/src/components/PopConfirm.vue
+++ b/src/components/PopConfirm.vue
@@ -1,11 +1,13 @@
 <script lang="jsx">
 import {Teleport, Transition} from 'vue'
+import BaseButton from "@/components/BaseButton.vue";

 export default {
  name: "PopConfirm",
  components: {
    Teleport,
-    Transition
+    Transition,
+    BaseButton
  },
  props: {
    title: {
@@ -60,18 +62,18 @@ export default {
  render() {
    let Vnode = this.$slots.default()[0]
    return (
-        <div class="pop-confirm">
+        <div class="pop-confirm leading-none">
          <Teleport to="body">
-            <Transition>
+            <Transition name="fade">
              {
                  this.show && (
-                      <div ref="tip" class="pop-confirm-content">
-                        <div class="text">
+                      <div ref="tip" class="pop-confirm-content shadow-2xl">
+                        <div class="w-50">
                          {this.title}
                        </div>
                        <div class="options">
-                          <div onClick={() => this.show = false}>取消</div>
-                          <div class="main" onClick={() => this.confirm()}>确认</div>
+                          <BaseButton type="info" size="small" onClick={() => this.show = false}>取消</BaseButton>
+                          <BaseButton size="small" onClick={() => this.confirm()}>确认</BaseButton>
                        </div>
                      </div>
                  )
@@ -85,43 +87,18 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-$bg-color: rgb(226, 226, 226);
-
 .pop-confirm-content {
  position: fixed;
  background: var(--color-tooltip-bg);
  padding: 1rem;
-  border-radius: .3rem;
+  border-radius: .6rem;
  transform: translate(-50%, calc(-100% - .6rem));
-  box-shadow: 0 0 6px 1px var(--color-tooltip-shadow);
  z-index: 999;

-  .text {
-    color: var(--color-font-1);
-    text-align: start;
-    font-size: 1rem;
-    width: 9rem;
-    min-width: 9rem;
-  }

  .options {
    margin-top: .9rem;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: .7rem;
-    font-size: .9rem;
-
-    div {
-      cursor: pointer;
-    }
-
-    .main {
-      color: gray;
-      background: $bg-color;
-      padding: .2rem .6rem;
-      border-radius: .24rem;
-    }
+    text-align: right;
  }
 }
 </style>
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from 'vue';
+import {defineComponent, ref, useAttrs, watch, computed} from 'vue';
 import Close from "@/components/icon/Close.vue";
-import { useDisableEventListener } from "@/hooks/event.ts";
+import {useDisableEventListener} from "@/hooks/event.ts";
+
+defineOptions({
+  name: "BaseInput",
+})

 const props = defineProps({
  modelValue: [String, Number],
  placeholder: String,
  disabled: Boolean,
  autofocus: Boolean,
+  error: Boolean,
  type: {
    type: String,
    default: 'text',
@@ -21,40 +26,42 @@ const props = defineProps({
    default: false,
  },
  maxLength: Number,
+  size: {
+    type: String,
+    default: 'normal',
+    validator: (value: string) => ['normal', 'large'].includes(value)
+  },
 });

-const emit = defineEmits(['update:modelValue', 'input', 'change', 'focus', 'blur', 'validation']);
+const emit = defineEmits(['update:modelValue', 'input', 'change', 'focus', 'blur', 'validation', 'enter']);
 const attrs = useAttrs();

 const inputValue = ref(props.modelValue);
-const errorMsg = ref('');
 let focus = $ref(false)
 let inputEl = $ref<HTMLDivElement>()
+const passwordVisible = ref(false)
+
+const inputType = computed(() => {
+  if (props.type === 'password') {
+    return passwordVisible.value ? 'text' : 'password'
+  }
+  return props.type
+})
+
+const togglePasswordVisibility = () => {
+  passwordVisible.value = !passwordVisible.value
+}

 watch(() => props.modelValue, (val) => {
  inputValue.value = val;
-  validate(val);
 });

-const validate = (val: string | number | null | undefined) => {
-  let err = '';
-  const strVal = val == null ? '' : String(val);
-  if (props.required && !strVal.trim()) {
-    err = '不能为空';
-  } else if (props.maxLength && strVal.length > props.maxLength) {
-    err = `长度不能超过 ${props.maxLength} 个字符`;
-  }
-  errorMsg.value = err;
-  emit('validation', err === '', err);
-  return err === '';
-};
-
 const onInput = (e: Event) => {
  const target = e.target as HTMLInputElement;
  inputValue.value = target.value;
-  validate(target.value);
  emit('update:modelValue', target.value);
  emit('input', e);
+  emit('change', e);
 };

 const onChange = (e: Event) => {
@@ -68,14 +75,15 @@ const onFocus = (e: FocusEvent) => {

 const onBlur = (e: FocusEvent) => {
  focus = false
-  validate(inputValue.value);
  emit('blur', e);
 };

-const clearInput = () => {
+const onEnter = (e: KeyboardEvent) => {
+  emit('enter', e);
+};

+const clearInput = () => {
  inputValue.value = '';
-  validate('');
  emit('update:modelValue', '');
 };

@@ -94,60 +102,97 @@ const vFocus = {
 </script>

 <template>
-  <div class="base-input2"
+  <div class="base-input"
       ref="inputEl"
-       :class="{ 'is-disabled': disabled, 'has-error': errorMsg,focus }">
+       :class="{ 'is-disabled': disabled, 'error': props.error, focus, [`base-input--${size}`]: true }">
    <slot name="subfix"></slot>
+    <!-- PreIcon slot -->
+    <div v-if="$slots.preIcon" class="pre-icon">
+      <slot name="preIcon"></slot>
+    </div>
+    <IconFluentLockClosed20Regular class="pre-icon" v-if="type === 'password'"/>
+    <IconFluentMail20Regular class="pre-icon" v-if="type === 'email'"/>
+    <IconFluentPhone20Regular class="pre-icon" v-if="type === 'tel'"/>
+    <IconFluentNumberSymbol20Regular class="pre-icon" v-if="type === 'code'"/>
+
    <input
-        v-bind="attrs"
-        :type="type"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :value="inputValue"
-        @input="onInput"
-        @change="onChange"
-        @focus="onFocus"
-        @blur="onBlur"
-        class="inner"
-        v-focus="autofocus"
-        :maxlength="maxLength"
+      v-bind="attrs"
+      :type="inputType"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :value="inputValue"
+      @input="onInput"
+      @change="onChange"
+      @focus="onFocus"
+      @blur="onBlur"
+      @keydown.enter="onEnter"
+      class="inner"
+      v-focus="autofocus"
+      :maxlength="maxLength"
    />
    <slot name="prefix"></slot>
    <Close
-        v-if="clearable && inputValue && !disabled"
-        @click="clearInput"/>
-    <div v-if="errorMsg" class="base-input2__error">{{ errorMsg }}</div>
+      v-if="clearable && inputValue && !disabled"
+      @click="clearInput"/>
+    <!-- Password visibility toggle -->
+    <div
+      v-if="type === 'password' && !disabled"
+      class="password-toggle"
+      @click="togglePasswordVisibility"
+      :title="passwordVisible ? '隐藏密码' : '显示密码'">
+      <IconFluentEye16Regular v-if="!passwordVisible"/>
+      <IconFluentEyeOff16Regular v-else/>
+    </div>
  </div>
 </template>

 <style scoped lang="scss">
-.base-input2 {
+.base-input {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: 6px;
  overflow: hidden;
  padding: .2rem .3rem;
  transition: all .3s;
  align-items: center;
  background: var(--color-input-bg);

+  ::placeholder {
+    font-size: 0.9rem;
+    color: darkgray;
+  }
+
+  // normal size (default)
+  &--normal {
+    padding: .2rem .3rem;
+
+    .inner {
+      height: 1.5rem;
+      font-size: 1rem;
+    }
+  }
+
+  // large size
+  &--large {
+    padding: .4rem .6rem;
+    border-radius: .5rem;
+
+    .inner {
+      height: 2rem;
+      font-size: 1.125rem;
+    }
+  }
+
  &.is-disabled {
    opacity: 0.6;
  }

-  &.has-error {
-    .base-input2__inner {
-      border-color: #f56c6c;
-    }
-
-    .base-input2__error {
-      color: #f56c6c;
-      font-size: 0.85rem;
-      margin-top: 0.25rem;
-    }
+  &.error {
+    border-color: #f56c6c;
+    background: rgba(245, 108, 108, 0.07);
  }

  &.focus {
@@ -159,8 +204,22 @@ const vFocus = {
    cursor: not-allowed;
  }

-  &__error {
-    padding-left: 0.5rem;
+  // PreIcon styling
+  &.has-preicon {
+    .inner {
+      padding-left: 2rem;
+    }
+  }
+
+  .pre-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-input-color);
+    opacity: 0.6;
+    z-index: 1;
+    pointer-events: none;
+    margin-right: 0.2rem;
  }

  .inner {
@@ -173,6 +232,24 @@ const vFocus = {
    height: 1.5rem;
    color: var(--color-input-color);
    background: transparent;
+    width: 100%;
+  }
+
+  .password-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-left: 4px;
+    cursor: pointer;
+    color: var(--color-input-color);
+    opacity: 0.6;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
  }
 }
 </style>
--- a/src/components/base/form/Form.vue
+++ b/src/components/base/form/Form.vue
@@ -5,7 +5,8 @@
 </template>

 <script setup lang="ts">
-import {ref, provide, watch, toRef} from 'vue'
+import {provide, ref, toRef} from 'vue'
+import type {FormField, FormModel, FormRules} from './types'

 interface Field {
  prop: string
@@ -14,8 +15,8 @@ interface Field {
 }

 const props = defineProps({
-  model: Object,
-  rules: Object // { word: [{required:true,...}, ...], name: [...] }
+  model: Object as () => FormModel,
+  rules: Object as () => FormRules
 })

 const fields = ref<Field[]>([])
@@ -25,7 +26,7 @@ const registerField = (field: Field) => {
 }

 // 校验整个表单
-const validate = (cb): boolean => {
+function validate(cb) {
  let valid = true
  fields.value.forEach(f => {
    const fieldRules = props.rules?.[f.prop] || []
@@ -35,10 +36,23 @@ const validate = (cb): boolean => {
  cb(valid)
 }

+// 校验指定字段
+function validateField(fieldName: string, cb?: (valid: boolean) => void): boolean {
+  const field = fields.value.find(f => f.prop === fieldName)
+  if (field) {
+    const fieldRules = props.rules?.[fieldName] || []
+    const valid = field.validate(fieldRules)
+    if (cb) cb(valid)
+    return valid
+  }
+  if (cb) cb(true)
+  return true
+}
+
 provide('registerField', registerField)
 provide('formModel', toRef(props, 'model'))
 provide('formValidate', validate)
 provide('formRules', props.rules)

-defineExpose({validate})
+defineExpose({validate, validateField})
 </script>
--- a/src/components/base/form/FormItem.vue
+++ b/src/components/base/form/FormItem.vue
@@ -11,7 +11,7 @@ let error = $ref('')

 // 拿到 form 的 model 和注册函数
 const formModel = inject<ref>('formModel')
-const registerField = inject('registerField')
+const registerField = inject<Function>('registerField')
 const formRules = inject('formRules', {})

 const myRules = $computed(() => {
@@ -19,9 +19,13 @@ const myRules = $computed(() => {
 })

 // 校验函数
-const validate = (rules) => {
+const validate = (rules, isBlur = false) => {
  error = ''
  const val = formModel.value[props.prop]
+  //为空并且是非主动触发检验的情况下，不检验
+  if (isBlur && val.trim() === '') {
+    return true
+  }
  for (const rule of rules) {
    if (rule.required && (!val || !val.toString().trim())) {
      error = rule.message
@@ -31,43 +35,93 @@ const validate = (rules) => {
      error = rule.message
      return false
    }
+    if (rule.min && val && val.toString().length < rule.min) {
+      error = rule.message
+      return false
+    }
+    if (rule.max && val && val.toString().length > rule.max) {
+      error = rule.message
+      return false
+    }
+    if (rule.validator) {
+      try {
+        rule.validator(rule, val)
+      } catch (e) {
+        error = e.message
+        return false
+      }
+    }
  }
  return true
 }

 // 自动触发 blur 校验
-const handleBlur = () => {
+function handleBlur() {
  const blurRules = myRules.filter((r) => r.trigger === 'blur')
-  if (blurRules.length) validate(blurRules)
+  if (blurRules.length) validate(blurRules, true)
+}
+
+function handChange() {
+  error = ''
 }

 // 注册到 Form
 onMounted(() => {
  registerField && registerField({prop: props.prop, modelValue: value, validate})
 })
+
 let slot = useSlots()

+
+function patchVNode(vnode, patchFn) {
+  if (!vnode) return vnode
+
+  // 如果当前节点就是我们要找的 BaseInput
+  if (vnode.type && vnode.type.name) {
+    return patchFn(vnode)
+  }
+
+  // 如果有子节点，则递归修改
+  if (Array.isArray(vnode.children)) {
+    vnode.children = vnode.children.map(child => patchVNode(child, patchFn))
+  }
+
+  return vnode
+}
+
+
 defineRender(() => {
-  let DefaultNode = slot.default()[0]
-  return <div class="form-item mb-6 flex gap-space">
+  let DefaultNode: any = slot.default()[0]
+
+  // 对 DefaultNode 深度查找 BaseInput 并加上 onBlur / error
+  DefaultNode = patchVNode(DefaultNode, vnode => {
+    return {
+      ...vnode,
+      props: {
+        ...vnode.props,
+        error: !!error,
+        onBlur: handleBlur,
+        onChange: handChange
+      },
+    }
+  })
+
+  return <div class="form-item   flex gap-space">
    {props.label &&
-        <label class="w-20 flex items-start mt-1 justify-end">
-          {myRules.length ? <span class="form-error">*</span> : null} {props.label}
-        </label>}
+      <label class="w-20 flex items-start mt-1 justify-end">
+        {myRules.length ? <span class="form-error">*</span> : null} {props.label}
+      </label>}
    <div class="flex-1 relative">
-      <DefaultNode onBlur={handleBlur}/>
-      <div class="form-error absolute top-[100%] anim" style={{opacity: error ? 1 : 0}}>{error}</div>
+      <DefaultNode/>
+      <div class="form-error my-0.5 anim" style={{opacity: error ? 1 : 0}}>{error} &nbsp;</div>
    </div>
  </div>
 })
 </script>

 <style scoped lang="scss">
-.form-item {
-
-  .form-error {
-    color: #f56c6c;
-    font-size: 0.8rem;
-  }
+.form-error {
+  color: #f56c6c;
+  font-size: 0.8rem;
 }
 </style>
--- a/src/components/base/form/types.ts
+++ b/src/components/base/form/types.ts
@@ -0,0 +1,65 @@
+// Form 组件的 TypeScript 类型定义
+
+// 表单字段接口
+export interface FormField {
+  prop: string
+  modelValue: any
+  validate: (rules: FormRule[]) => boolean
+}
+
+// 表单规则接口
+export interface FormRule {
+  required?: boolean
+  message?: string
+  pattern?: RegExp
+  validator?: (rule: FormRule, value: any, callback: (error?: Error) => void) => void
+  min?: number
+  max?: number
+  len?: number
+  type?: string
+}
+
+// 表单规则对象类型
+export type FormRules = Record<string, FormRule[]>
+
+// 表单模型对象类型
+export type FormModel = Record<string, any>
+
+// Form 组件的 Props 接口
+export interface FormProps {
+  model?: FormModel
+  rules?: FormRules
+}
+
+// Form 组件的实例接口
+export interface FormInstance {
+  /**
+   * 校验整个表单
+   * @param callback 校验完成后的回调函数，接收校验结果
+   */
+  validate: (callback: (valid: boolean) => void) => void
+  
+  /**
+   * 校验指定字段
+   * @param fieldName 要校验的字段名称
+   * @param callback 可选的回调函数，接收校验结果
+   * @returns 校验是否通过
+   */
+  validateField: (fieldName: string, callback?: (valid: boolean) => void) => boolean
+}
+
+// 注入的上下文类型
+export interface FormContext {
+  registerField: (field: FormField) => void
+  formModel: FormModel
+  formValidate: (callback: (valid: boolean) => void) => void
+  formRules: FormRules
+}
+
+// 验证状态枚举
+export enum ValidateStatus {
+  Success = 'success',
+  Error = 'error',
+  Validating = 'validating',
+  Pending = 'pending'
+}
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -188,7 +188,7 @@ async function cancel() {
 <style scoped lang="scss">


-$modal-mask-bg: rgba(#000, .45);
+$modal-mask-bg: rgba(#000, .6);
 $radius: .5rem;
 $time: 0.3s;
 $header-height: 4rem;
@@ -196,11 +196,9 @@ $header-height: 4rem;
@keyframes bounce-in {
  0% {
    opacity: 0;
-    transform: scale(0);
  }
  100% {
    opacity: 1;
-    transform: scale(1);
  }
 }

@@ -259,7 +257,6 @@ $header-height: 4rem;
    animation: bounce-in $time ease-out;

    &.bounce-out {
-      transform: scale(0);
      opacity: 0;
    }
  }