Skip to content

feat: Migrate Frontend to pnpm, Enhance Features and Add Notifications#29

Merged
Cloxl merged 54 commits intomainfrom
dev
Mar 27, 2025
Merged

feat: Migrate Frontend to pnpm, Enhance Features and Add Notifications#29
Cloxl merged 54 commits intomainfrom
dev

Conversation

@Cloxl
Copy link
Owner

@Cloxl Cloxl commented Mar 23, 2025

This pull request includes the following updates and enhancements:

  • Migrated the frontend package manager from npm to pnpm for improved efficiency.
  • Added linting tools to ensure code quality and consistency.
  • Integrated Unocss for optimized styling and faster development.
  • Enhanced email verification process for improved security and reliability.
  • Implemented auto-refresh logic on the homepage for up-to-date content.
  • Developed a backend feature to monitor current usage within a specified time unit.
  • Added alert notifications to inform users when they are close to reaching their usage limit, prompting them to switch accounts if necessary.
  • Add multi-line timing detection, use multiple lines to try concurrently when request errors occur, and resend if the request succeeds.
  • Fixed the issue where announcements and guides were displayed together.
  • Fixed the issue where logs switched to undefined accounts.
  • Fixed the problem of incomplete i18n adaptation.
  • Beautify the settings interface ui.
  • Improved user activation days display.
  • More complete cursor usage error prompts.

此次拉取请求包括以下更新和增强功能:

  • 将前端包管理器从 npm 迁移到 pnpm 以提高效率。
  • 添加 linting 工具来确保代码质量和一致性。
  • 集成 Unocss 以优化样式并加快开发速度。
  • 增强电子邮件验证流程,以提高安全性和可靠性。
  • 在主页上实现自动刷新逻辑以获取最新内容。
  • 添加定时任务检测,当本地使用账户快到limit时发送信息推送,通知用户切换账户。
  • 添加多线路定时检测, 请求错误时使用多线路并发尝试,如果请求成功则重发。
  • 修复公告和引导一起显示的问题。
  • 修复日志切换到undefined账户的问题。
  • 修复i18n适配不全的问题。
  • 美化设置界面ui。
  • 更完善的cursor使用错误提示。
  • 更完善的用户激活天数显示。

好的,这是翻译成中文的 pull request 总结:

Sourcery 总结

迁移前端包管理器至 pnpm,添加代码检查工具和 Unocss,增强邮件验证,并更新依赖。

构建:

  • 将前端包管理器从 npm 迁移到 pnpm。
  • 添加代码检查工具以确保代码质量和一致性。
  • 集成 Unocss 以优化样式并加快开发速度。
  • 更新依赖。
Original summary in English

Summary by Sourcery

Migrate the frontend package manager to pnpm, add linting tools and Unocss, enhance email verification, and update dependencies.

Build:

  • Migrate the frontend package manager from npm to pnpm.
  • Add linting tools to ensure code quality and consistency.
  • Integrate Unocss for optimized styling and faster development.
  • Update dependencies.

Cloxl and others added 23 commits March 19, 2025 18:48
feat(pnpm): replace npm and add npmrc
…dency, and refactor various components for improved code consistency
…ction for improved readability and maintainability
…ction for improved readability and maintainability
@Cloxl Cloxl added the enhancement New feature or request label Mar 23, 2025
@sourcery-ai
Copy link

sourcery-ai bot commented Mar 23, 2025

## Sourcery 评审指南

此 Pull Request 将前端包管理器迁移到 pnpm,集成了 Unocss,增强了电子邮件验证流程,添加了 Lint 工具,并重构了仪表盘视图。迁移到 pnpm 提高了效率,而 Unocss 优化了样式和开发速度。增强的电子邮件验证流程提高了安全性和可靠性。添加 Lint 工具确保了代码质量和一致性。最后,仪表盘视图的重构提高了代码的可读性和可维护性。

#### LoginOverlay 的更新类图

```mermaid
classDiagram
    class LoginOverlay {
        - emit: any
        - message: any
        - currentLang: any
        - activeTab: any
        - userStore: any
        - showForgotPassword: boolean
        - forgotPasswordLoading: boolean
        - forgotPasswordCodeSending: boolean
        - forgotPasswordForm: object
        - formState: object
        + handleLogin(): Promise<void>
        + handleSendCode(email: string, type: string): Promise<void>
        + handleRegister(): Promise<void>
        + handleForgotPassword(): Promise<void>
    }

    class FormState {
        - login: object
        - register: object
    }

    class Validators {
        + validatePassword(value: string): boolean
        + validateEmail(value: string): boolean
        + validateCode(value: string): boolean
    }

    LoginOverlay -- FormState : has
    LoginOverlay -- Validators : uses

    note for LoginOverlay "重构以提高可读性和可维护性。"
    note for LoginOverlay "添加了处理忘记密码的方法。"
    note for FormState "表示登录和注册表单的状态。"
    note for Validators "表示登录和注册表单的验证器。"

文件级别变更

变更 详情 文件
将前端包管理器从 npm 迁移到 pnpm,以提高效率。
  • 将包管理器从 npm 更新到 pnpm。
  • 修改了构建脚本以使用 pnpm 命令。
  • 将 lockfile 更新为 pnpm-lock.yaml。
package.json
package-lock.json
集成 Unocss 以优化样式并加快开发速度。
  • 添加了 Unocss 及其依赖项。
  • 使用预设和转换器配置了 Unocss。
  • 更新了 main.ts 文件以导入 Unocss。
  • 删除了旧的 CSS 文件。
index.html
src/main.ts
增强了电子邮件验证流程,以提高安全性和可靠性。
  • 将电子邮件验证添加到登录和注册表单。
  • 改进了电子邮件验证正则表达式。
  • 将电子邮件状态添加到用户信息卡。
src/components/LoginOverlay.vue
src/views/DashboardView.vue
添加了 Lint 工具以确保代码质量和一致性。
  • 添加了 eslint 和 prettier 依赖项。
  • 使用推荐规则配置了 eslint 和 prettier。
  • 将 Lint 脚本添加到 package.json。
package.json
重构了仪表盘视图以提高代码的可读性和可维护性。
  • 将 DashboardTour 组件替换为 DashboardTourComponent。
  • 将 MarkdownRender 组件替换为 MarkdownRenderComponent。
  • 删除了不必要的注释。
  • 改进了代码格式。
src/views/DashboardView.vue

提示和命令

与 Sourcery 互动

  • 触发新的审查: 在 Pull Request 上评论 @sourcery-ai review
  • 继续讨论: 直接回复 Sourcery 的审查评论。
  • 从审查评论生成 GitHub Issue: 通过回复审查评论,要求 Sourcery 从审查评论创建一个 Issue。您也可以回复审查评论并添加 @sourcery-ai issue 以从中创建一个 Issue。
  • 生成 Pull Request 标题: 在 Pull Request 标题中的任何位置写入 @sourcery-ai 以随时生成标题。您也可以在 Pull Request 上评论 @sourcery-ai title 以随时(重新)生成标题。
  • 生成 Pull Request 摘要: 在 Pull Request 正文中的任何位置写入 @sourcery-ai summary 以随时在您想要的位置生成 PR 摘要。您也可以在 Pull Request 上评论 @sourcery-ai summary 以随时(重新)生成摘要。
  • 生成评审指南: 在 Pull Request 上评论 @sourcery-ai guide 以随时(重新)生成评审指南。
  • 解决所有 Sourcery 评论: 在 Pull Request 上评论 @sourcery-ai resolve 以解决所有 Sourcery 评论。如果您已经处理了所有评论并且不想再看到它们,这将非常有用。
  • 驳回所有 Sourcery 审查: 在 Pull Request 上评论 @sourcery-ai dismiss 以驳回所有现有的 Sourcery 审查。如果您想重新开始新的审查,这将特别有用 - 不要忘记评论 @sourcery-ai review 以触发新的审查!
  • 为 Issue 生成行动计划: 在 Issue 上评论 @sourcery-ai plan 以为其生成行动计划。

自定义您的体验

访问您的 仪表盘 以:

  • 启用或禁用审查功能,例如 Sourcery 生成的 Pull Request 摘要、评审指南等。
  • 更改审查语言。
  • 添加、删除或编辑自定义审查说明。
  • 调整其他审查设置。

获取帮助

```
Original review guide in English

Reviewer's Guide by Sourcery

This pull request migrates the frontend package manager to pnpm, integrates Unocss, enhances the email verification process, adds linting tools, and refactors the dashboard view. The migration to pnpm improves efficiency, while Unocss optimizes styling and development speed. The enhanced email verification process improves security and reliability. The addition of linting tools ensures code quality and consistency. Finally, the refactoring of the dashboard view improves code readability and maintainability.

Updated class diagram for LoginOverlay

classDiagram
    class LoginOverlay {
        - emit: any
        - message: any
        - currentLang: any
        - activeTab: any
        - userStore: any
        - showForgotPassword: boolean
        - forgotPasswordLoading: boolean
        - forgotPasswordCodeSending: boolean
        - forgotPasswordForm: object
        - formState: object
        + handleLogin(): Promise<void>
        + handleSendCode(email: string, type: string): Promise<void>
        + handleRegister(): Promise<void>
        + handleForgotPassword(): Promise<void>
    }

    class FormState {
        - login: object
        - register: object
    }

    class Validators {
        + validatePassword(value: string): boolean
        + validateEmail(value: string): boolean
        + validateCode(value: string): boolean
    }

    LoginOverlay -- FormState : has
    LoginOverlay -- Validators : uses

    note for LoginOverlay "Refactored to improve readability and maintainability."
    note for LoginOverlay "Added methods to handle forgot password."
    note for FormState "Represents the state of the login and register forms."
    note for Validators "Represents the validators for the login and register forms."
Loading

File-Level Changes

Change Details Files
Migrated the frontend package manager from npm to pnpm for improved efficiency.
  • Updated the package manager from npm to pnpm.
  • Modified the build scripts to use pnpm commands.
  • Updated the lockfile to pnpm-lock.yaml.
package.json
package-lock.json
Integrated Unocss for optimized styling and faster development.
  • Added Unocss and its dependencies.
  • Configured Unocss with presets and transformers.
  • Updated the main.ts file to import Unocss.
  • Removed the old CSS files.
index.html
src/main.ts
Enhanced email verification process for improved security and reliability.
  • Added email validation to the login and register forms.
  • Improved the email validation regex.
  • Added email status to the user info card.
src/components/LoginOverlay.vue
src/views/DashboardView.vue
Added linting tools to ensure code quality and consistency.
  • Added eslint and prettier dependencies.
  • Configured eslint and prettier with recommended rules.
  • Added linting scripts to package.json.
package.json
Refactored the dashboard view to improve code readability and maintainability.
  • Replaced the DashboardTour component with DashboardTourComponent.
  • Replaced the MarkdownRender component with MarkdownRenderComponent.
  • Removed unnecessary comments.
  • Improved the code formatting.
src/views/DashboardView.vue

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!
  • Generate a plan of action for an issue: Comment @sourcery-ai plan on
    an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Cloxl - I've reviewed your changes - here's some feedback:

Overall Comments:

  • The description mentions features that are not yet implemented; consider removing these until they are complete to avoid confusion.
Here's what I looked at during the review
  • 🟡 General issues: 2 issues found
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment on lines +15 to +23
presets: [
presetUno() as any,
presetAttributify() as any,
presetIcons({
scale: 1.2,
warn: true,
}) as any,
],
transformers: [transformerDirectives() as any],
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider refining type casts in plugin presets.

The use of 'as any' when casting the UnoCSS presets may hide potential type issues. If possible, try to use more specific types provided by the plugin or adjust configuration types to increase type safety.

Suggested change
presets: [
presetUno() as any,
presetAttributify() as any,
presetIcons({
scale: 1.2,
warn: true,
}) as any,
],
transformers: [transformerDirectives() as any],
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1.2,
warn: true,
}),
],
transformers: [transformerDirectives()],

---

**联系方式**
侵权投诉或技术支持请联络:[cloxl996@outlook.com](mailto:cloxl996@outlook.com)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question (typo): Possible typo in email address.

The email address is listed as "cloxl996@outlook.com". Is it possible this is a typo and should be "cloxd996@outlook.com"?

Suggested change
侵权投诉或技术支持请联络:[cloxl996@outlook.com](mailto:cloxl996@outlook.com)
侵权投诉或技术支持请联络:[cloxd996@outlook.com](mailto:cloxd996@outlook.com)

Comment on lines +47 to +48
const response = await invoke<ApiResponse<any>>('check_user', { email })
return response
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Inline variable that is immediately returned (inline-immediately-returned-variable)

Suggested change
const response = await invoke<ApiResponse<any>>('check_user', { email })
return response
return await invoke<ApiResponse<any>>('check_user', { email });


ExplanationSomething that we often see in people's code is assigning to a result variable
and then immediately returning it.

Returning the result directly shortens the code and removes an unnecessary
variable, reducing the mental load of reading the function.

Where intermediate variables can be useful is if they then get used as a
parameter or a condition, and the name can act like a comment on what the
variable represents. In the case where you're returning it from a function, the
function name is there to tell you what the result is, so the variable name
is unnecessary.

if (!valueStr) return false;
const valueStr = await getUserData('system.articles')
if (!valueStr) return false
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change
if (!valueStr) return false
if (!valueStr) {


ExplanationIt is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

Comment on lines +641 to +642
const result = readIds.includes(articleId)
return result
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Inline variable that is immediately returned (inline-immediately-returned-variable)

Suggested change
const result = readIds.includes(articleId)
return result
return readIds.includes(articleId);


ExplanationSomething that we often see in people's code is assigning to a result variable
and then immediately returning it.

Returning the result directly shortens the code and removes an unnecessary
variable, reducing the mental load of reading the function.

Where intermediate variables can be useful is if they then get used as a
parameter or a condition, and the name can act like a comment on what the
variable represents. In the case where you're returning it from a function, the
function name is there to tell you what the result is, so the variable name
is unnecessary.

async function init() {
if (initialized.value) return;
if (initialized.value) return
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change
if (initialized.value) return
if (initialized.value) {


ExplanationIt is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

Comment on lines 106 to 116
function setupHistoryListener() {
const handler = async () => {
await loadHistoryRecords()
};
window.addEventListener('history_updated', handler);
}

window.addEventListener('history_updated', handler)

return () => {
window.removeEventListener('history_updated', handler);
window.removeEventListener('history_updated', handler)
}
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (code-quality): Avoid function declarations, favouring function assignment expressions, inside blocks. (avoid-function-declarations-in-blocks)

ExplanationFunction declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers. Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you should use function expressions, which create functions in-scope.

})
// 计算属性
const currentInbound = computed(() => {
if (inboundList.value.length === 0) return null
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change
if (inboundList.value.length === 0) return null
if (inboundList.value.length === 0) {


ExplanationIt is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

Comment on lines +27 to +53
async function fetchInboundList() {
isLoading.value = true
try {
const configData = await getUserData('system.inbound.config')
if (configData) {
const config = JSON.parse(configData) as InboundConfig
inboundList.value = config.inbound
} else {
console.warn('未获取到线路配置')
inboundList.value = []
}

// 获取当前选择的线路索引
const currentIndex = await getUserData('system.inbound.current')
if (currentIndex) {
const index = parseInt(currentIndex)
if (!isNaN(index) && index >= 0 && index < inboundList.value.length) {
currentInboundIndex.value = index
}
}
} catch (error) {
console.error('获取线路配置失败:', error)
inboundList.value = []
} finally {
isLoading.value = false
// 获取当前选择的线路索引
const currentIndex = await getUserData('system.inbound.current')
if (currentIndex) {
const index = parseInt(currentIndex)
if (!isNaN(index) && index >= 0 && index < inboundList.value.length) {
currentInboundIndex.value = index
}
}
} catch (error) {
console.error('获取线路配置失败:', error)
inboundList.value = []
} finally {
isLoading.value = false
}
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (code-quality): Avoid function declarations, favouring function assignment expressions, inside blocks. (avoid-function-declarations-in-blocks)

ExplanationFunction declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers. Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you should use function expressions, which create functions in-scope.

Comment on lines 56 to 71
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (code-quality): Avoid function declarations, favouring function assignment expressions, inside blocks. (avoid-function-declarations-in-blocks)

ExplanationFunction declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers. Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you should use function expressions, which create functions in-scope.

@AlexWu840730
Copy link

大老您好,想問 Cursor Tab 被鎖有解嗎? 激活狀態下還是能和LLM進行chat,但是auto complete 用到一半被鎖了。顯示Requires pro

@Cloxl
Copy link
Owner Author

Cloxl commented Mar 27, 2025

大老您好,想問 Cursor Tab 被鎖有解嗎? 激活狀態下還是能和LLM進行chat,但是auto complete 用到一半被鎖了。顯示Requires pro

这个只能换号解决了 cursor的问题

@tangxieyu
Copy link

每次登录要输入账号密码太麻烦了,做一个记录账号的功能

@Cloxl
Copy link
Owner Author

Cloxl commented Mar 27, 2025

每次登录要输入账号密码太麻烦了,做一个记录账号的功能
后端会签发一个月的jwt token

软件所有数据完成存储到本地 记录账户密码功能并不安全

@Cloxl Cloxl merged commit e861705 into main Mar 27, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants