Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 50 additions & 3 deletions plugins/timestamp/.gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,51 @@
node_modules
dist
*.local
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build
/dist

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

# OpenNext
/.open-next

# wrangler files
.wrangler
.dev.vars*

# vscode
.vscode/
.history/

# cursor
final_review_gate.py
213 changes: 213 additions & 0 deletions plugins/timestamp/AGENTS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
# AGENTS.md - Developer Guide for ztools-timestamp

This document provides coding guidelines and reference information for AI agents operating in this repository.

## Project Overview

- **Type**: ZTools Plugin (Vue 3 + Vite + TypeScript)
- **Purpose**: Timestamp conversion tool
- **Framework**: Vue 3 (Composition API), Vite 6, TypeScript 5.3
- **Styling**: Tailwind CSS v4

## Build Commands

```bash
# Install dependencies
npm install
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

项目已切换到 pnpm(存在 pnpm-lock.yaml),但文档中仍在使用 npm 命令。建议更新文档以保持一致。

Suggested change
npm install
pnpm install


# Development server (http://localhost:5173)
npm run dev

# Production build
npm run build

# Note: No test framework configured (no tests exist)
```

## Code Style Guidelines

### TypeScript

- **Strict Mode**: Disabled (`strict: false`, `noImplicitAny: false` in tsconfig.json)
- **Module System**: ESNext with bundler module resolution
- **Target**: ES2020
- **Types**: Use `any` sparingly; prefer explicit types when possible

### Vue Components

- Use `<script setup lang="ts">` syntax
- Component file naming: `index.vue` for directory exports, descriptive names for feature components
- Props: Use `defineProps()` with explicit type definitions

```vue
<script lang="ts" setup>
defineProps<{
launchParam: {
type: Object
required: true
}
}>()
</script>
```

### Imports

- Vue core: `import { ref, onMounted } from 'vue'`
- Local components: `import Timestamp from './components/timestamp/timestamp.vue'`
- CSS: `import './assets/css/main.css'`

### Styling (Tailwind CSS v4)

- Import: `@import 'tailwindcss';` (in main.css)
- Use utility classes directly in templates
- Custom base styles:

```css
@layer base {
* {
border-color: var(--color-gray-200);
}
}
```

### ZTools API Usage

Access ZTools APIs via `window.ztools`:

```typescript
// Listen for plugin entry
window.ztools.onPluginEnter((param) => {
route.value = param.code
launchParam.value = param
})

// Listen for plugin exit
window.ztools.onPluginOut(() => {
route.value = ''
})

// Clipboard
await window.ztools.getClipboardContent()

// UI
window.ztools.hideMainWindow()
window.ztools.showTip('message')
```

### Preload Services

Node.js capabilities accessed via `window.services`:

```javascript
// Defined in public/preload/services.js
const result = await window.services.someService(params)
```

## Error Handling

- Use try-catch for async operations
- Always log errors with meaningful context

```typescript
try {
const content = await window.services.readFile('/path')
} catch (error) {
console.error('读取失败:', error)
}
```

## Naming Conventions

| Type | Convention | Example |
|------|------------|---------|
| Components | PascalCase | `Timestamp`, `HelloWorld` |
| Files | kebab-case | `timestamp.vue`, `main.ts` |
| Props | camelCase | `launchParam` |
| Variables | camelCase | `route`, `inputValue` |

## Project Structure

```
src/
├── main.ts # Vue app entry
├── main.css # Global styles (Tailwind)
├── App.vue # Root component (router)
├── env.d.ts # Type declarations
├── assets/css/ # CSS assets
│ └── main.css
└── components/
└── timestamp/
└── timestamp.vue

public/
├── plugin.json # Plugin configuration
├── logo.png # Plugin icon
└── preload/
└── services.js # Node.js service extensions
```

## Common Patterns

### Conditional Rendering

```vue
<Timestamp v-if="route === 'timestamp'" :launch-param="launchParam" />
```

### Event Handling

```vue
<script setup lang="ts">
const handleClick = () => {
// implementation
}
</script>

<template>
<button @click="handleClick">Click</button>
</template>
```

### State with refs

```typescript
import { ref } from 'vue'

const route = ref('')
const launchParam = ref<any>({})
```

## ZTools Plugin Configuration

Edit `public/plugin.json` to configure features:

```json
{
"code": "timestamp",
"explain": "时间戳转换",
"cmds": ["timestamp", "时间戳转换"]
}
```

## Key Dependencies

| Package | Version | Purpose |
|---------|---------|---------|
| vue | ^3.5.13 | Framework |
| vite | ^6.0.11 | Build tool |
| typescript | ^5.3.0 | TypeScript |
| tailwindcss | ^4.2.2 | Styling |
| @ztools-center/ztools-api-types | ^1.0.1 | ZTools API types |
| @vitejs/plugin-vue | ^5.2.1 | Vue plugin for Vite |

## Lint/Type Checking

- Run `vue-tsc` as part of build: `npm run build` (runs `vue-tsc && vite build`)
- No separate lint script configured

## Important Notes

1. **No tests exist** - This project has no test suite configured
2. **Strict mode off** - TypeScript is lenient; avoid using `as any` when possible
3. **Tailwind v4** - Uses `@import 'tailwindcss'` syntax (not `@tailwind` directives)
4. **ZTools-specific** - This is a plugin for ZTools app; requires ZTools runtime for full functionality
76 changes: 76 additions & 0 deletions plugins/timestamp/CLAUDE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

- **Type**: ZTools Plugin (timestamp conversion tool)
- **Stack**: Vue 3 (Composition API, `<script setup lang="ts">`), Vite 6, TypeScript 5, Tailwind CSS v4
- **Note**: This is a plugin for the ZTools desktop app — it requires the ZTools runtime to function. Dev mode serves from `http://localhost:5173`.

## Build Commands

```bash
npm install # Install dependencies
npm run dev # Start dev server (http://localhost:5173)
npm run build # Production build (runs vue-tsc first, outputs to dist/)
```

No test framework is configured.

## Architecture

### Plugin Routing
The app uses a simple string-based router in `App.vue`. There are no external router libraries — route state is a single `ref<string>`:

1. `window.ztools.onPluginEnter(param)` sets `route.value = param.code`
2. `App.vue` conditionally renders components based on `route`
3. Each feature maps to one Vue component registered in `App.vue`

### Component Structure
```
src/
├── App.vue # Root: route state + conditional rendering
├── main.ts # Vue app entry
├── main.css # Tailwind import + base styles
└── components/
└── timestamp/
└── timestamp.vue # The only feature component (timestamp conversion)
```

### ZTools API (`window.ztools`)
Provided by `@ztools-center/ztools-api-types`. Key methods:
- `onPluginEnter(callback)` — plugin entry point, receives `{ code, ... }`
- `onPluginOut(callback)` — plugin exit
- `getClipboardContent()` — read clipboard
- `hideMainWindow()` / `showTip(msg)` — UI controls

### Preload Services (`window.services`)
Node.js capabilities exposed via `public/preload/services.js`. Call from Vue with `await window.services.someMethod(params)`.

## TypeScript

Strict mode is **disabled** (`strict: false`, `noImplicitAny: false`). Prefer explicit types but avoid excessive `as any`. Target: ES2020, module: ESNext (bundler resolution).

## Styling

Tailwind CSS v4 is used with the Vite plugin (`@tailwindcss/vite`). Import via:
```css
@import 'tailwindcss';
```
Custom base styles are in `src/main.css`. Use utility classes in templates.

## Adding a New Feature

1. **Component**: Create `src/components/<name>/index.vue` using `<script setup lang="ts">`
2. **Route**: Import and add to the conditional render in `App.vue`
3. **Config**: Add feature entry in `public/plugin.json` under `features`, matching `code` to the route name

## Key Files

| File | Purpose |
|------|---------|
| `public/plugin.json` | Plugin metadata, features, commands, development URL |
| `public/preload/services.js` | Node.js service extensions |
| `src/App.vue` | Route registration and conditional rendering |
| `vite.config.js` | Vite + Vue + Tailwind plugins, base path `./` |
Loading