@mico_fe/ftc-plugin 0.2.0

package/install.sh

@@ -0,0 +1,184 @@
+#!/usr/bin/env bash
+
+set -e
+
+# 颜色输出
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# 配置
+PACKAGE_NAME="@mico_fe/ftc-plugin"
+INSTALL_DIR="$HOME/figma-to-code-plugin"
+TMP_DIR="/tmp/figma-to-code-plugin-install"
+FORCE_INSTALL=false
+
+# 打印带颜色的消息
+print_message() {
+  local color=$1
+  local message=$2
+  echo -e "${color}${message}${NC}"
+}
+
+# 检查命令是否存在
+command_exists() {
+  command -v "$1" >/dev/null 2>&1
+}
+
+# 清理临时文件
+cleanup() {
+  if [ -d "$TMP_DIR" ]; then
+    print_message "$BLUE" "🧹 清理临时文件..."
+    rm -rf "$TMP_DIR"
+  fi
+}
+
+# 错误处理
+error_exit() {
+  print_message "$RED" "❌ 错误: $1"
+  cleanup
+  exit 1
+}
+
+# 主安装函数
+main() {
+  # 解析命令行参数
+  while [[ $# -gt 0 ]]; do
+    case $1 in
+      -y|--yes|--force)
+        FORCE_INSTALL=true
+        shift
+        ;;
+      -h|--help)
+        print_message "$BLUE" "使用方法: $0 [选项]"
+        print_message "$BLUE" "选项:"
+        print_message "$BLUE" "  -y, --yes, --force  跳过确认，强制覆盖安装"
+        print_message "$BLUE" "  -h, --help          显示此帮助信息"
+        exit 0
+        ;;
+      *)
+        print_message "$YELLOW" "未知选项: $1"
+        shift
+        ;;
+    esac
+  done
+
+  print_message "$GREEN" "╔══════════════════════════════════════════════════╗"
+  print_message "$GREEN" "║   Figma to Code Plugin 安装脚本                  ║"
+  print_message "$GREEN" "╚══════════════════════════════════════════════════╝"
+  echo ""
+
+  # 检查必要的命令
+  print_message "$BLUE" "🔍 检查系统依赖..."
+  if ! command_exists curl && ! command_exists wget; then
+    error_exit "需要 curl 或 wget 命令"
+  fi
+
+  if ! command_exists tar; then
+    error_exit "需要 tar 命令"
+  fi
+
+  # 创建临时目录
+  print_message "$BLUE" "📁 创建临时目录..."
+  mkdir -p "$TMP_DIR"
+
+  # 获取最新版本信息
+  print_message "$BLUE" "🔎 获取最新版本信息..."
+  local registry_url="https://registry.npmjs.org/${PACKAGE_NAME}"
+
+  if command_exists curl; then
+    PACKAGE_INFO=$(curl -sL "$registry_url")
+  else
+    PACKAGE_INFO=$(wget -qO- "$registry_url")
+  fi
+
+  if [ -z "$PACKAGE_INFO" ]; then
+    error_exit "无法获取包信息"
+  fi
+
+  # 解析最新版本号和下载地址
+  LATEST_VERSION=$(echo "$PACKAGE_INFO" | grep -o '"latest":"[^"]*"' | sed 's/"latest":"\(.*\)"/\1/')
+  TARBALL_URL="https://registry.npmjs.org/@mico_fe/ftc-plugin/-/ftc-plugin-${LATEST_VERSION}.tgz"
+
+  if [ -z "$TARBALL_URL" ]; then
+    error_exit "无法获取下载地址"
+  fi
+
+  print_message "$GREEN" "📦 最新版本: $LATEST_VERSION"
+  print_message "$BLUE" "⬇️  下载包文件..."
+
+  # 下载包
+  local tarball_file="$TMP_DIR/package.tgz"
+  if command_exists curl; then
+    curl -L "$TARBALL_URL" -o "$tarball_file" --progress-bar || error_exit "下载失败"
+  else
+    wget --show-progress -O "$tarball_file" "$TARBALL_URL" || error_exit "下载失败"
+  fi
+
+  # 检查安装目录
+  if [ -d "$INSTALL_DIR" ]; then
+    print_message "$YELLOW" "⚠️  检测到已存在的安装目录: $INSTALL_DIR"
+    
+    if [ "$FORCE_INSTALL" = true ]; then
+      print_message "$BLUE" "💪 强制覆盖安装模式"
+      rm -rf "$INSTALL_DIR"
+    else
+      # 使用 /dev/tty 来确保即使通过管道执行也能读取用户输入
+      if [ -t 0 ]; then
+        # 标准输入是终端
+        read -p "是否覆盖安装? (y/N): " -n 1 -r
+        echo
+      else
+        # 标准输入不是终端（通过管道），从 /dev/tty 读取
+        read -p "是否覆盖安装? (y/N): " -n 1 -r < /dev/tty
+        echo
+      fi
+      
+      if [[ ! $REPLY =~ ^[Yy]$ ]]; then
+        print_message "$YELLOW" "取消安装"
+        cleanup
+        exit 0
+      fi
+      rm -rf "$INSTALL_DIR"
+    fi
+  fi
+
+  # 创建安装目录
+  print_message "$BLUE" "📂 创建安装目录..."
+  mkdir -p "$INSTALL_DIR"
+
+  # 解压包
+  print_message "$BLUE" "📦 解压文件到 $INSTALL_DIR..."
+  tar -xzf "$tarball_file" -C "$TMP_DIR" || error_exit "解压失败"
+
+  # 移动文件到安装目录（npm包解压后在package子目录）
+  if [ -d "$TMP_DIR/package" ]; then
+    cp -r "$TMP_DIR/package/"* "$INSTALL_DIR/" || error_exit "移动文件失败"
+  else
+    cp -r "$TMP_DIR/"* "$INSTALL_DIR/" || error_exit "移动文件失败"
+  fi
+
+  # 清理临时文件
+  cleanup
+
+  # 安装成功
+  echo ""
+  print_message "$GREEN" "✅ 安装成功!"
+  print_message "$GREEN" "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+  print_message "$BLUE" "📍 安装位置: $INSTALL_DIR"
+  print_message "$BLUE" "📌 版本: $LATEST_VERSION"
+  echo ""
+  print_message "$YELLOW" "📝 使用说明:"
+  print_message "$YELLOW" "   1. 打开 Figma 桌面应用"
+  print_message "$YELLOW" "   2. 进入 Plugins > Development > Import plugin from manifest"
+  print_message "$YELLOW" "   3. 选择文件: $INSTALL_DIR/manifest.json"
+}
+
+# 捕获退出信号，确保清理
+trap cleanup EXIT
+
+# 执行主函数
+main "$@"
+

package/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "MFTC",
+  "id": "942138313887142055324",
+  "api": "1.0.0",
+  "main": "dist/code.js",
+  "ui": "dist/index.html",
+  "editorType": ["figma", "dev"],
+  "capabilities": ["inspect", "vscode"],
+  "permissions": [],
+  "documentAccess": "dynamic-page",
+  "networkAccess": {
+    "allowedDomains": [
+      "http://localhost:17482",
+      "http://localhost:17483",
+      "http://localhost:17484",
+      "http://localhost:17485",
+      "http://localhost:17486"
+    ],
+    "reasoning": "Connects to user's local Bridge service for design-to-code workflow."
+  }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@mico_fe/ftc-plugin",
+  "version": "0.2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "manifest.json",
+    "README.md",
+    "install.sh",
+    "uninstall.sh"
+  ],
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "npm run build:ui:prod && npm run build:main:prod --minify --tree-shaking=true",
+    "build:main:prod": "esbuild plugin-src/code.ts --bundle --target=ES6 --outfile=dist/code.js",
+    "build:ui:prod": "vite build --minify esbuild --emptyOutDir=false --mode production",
+    "build:watch": "concurrently -n pluginMain,ui \"npm run build:main:prod --watch\" \"npm run build:ui:prod --watch\"",
+    "lint": "eslint plugin-src ui-src",
+    "lint:fix": "eslint plugin-src ui-src --fix"
+  },
+  "dependencies": {
+    "@mico/figma-to-code-plugin-main": "workspace:*",
+    "@mico/figma-to-code-plugin-ui": "workspace:*",
+    "@mico/figma-to-code-types": "workspace:*",
+    "@figma/plugin-typings": "^1.114.0",
+    "antd": "^6.0.0",
+    "clsx": "^2.1.1",
+    "copy-to-clipboard": "^3.3.3",
+    "lucide-react": "^0.483.0",
+    "motion": "^12.19.1",
+    "nanoid": "^5.1.5",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@mico/eslint-config": "^0.0.1",
+    "@mico/tsconfig": "^0.0.1",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react-swc": "^3.10.2",
+    "concurrently": "^9.2.0",
+    "esbuild": "^0.25.5",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "postcss": "^8.5.6",
+    "tailwindcss": "4.0.14",
+    "typescript": "^6.0.0",
+    "vite": "^5.4.19",
+    "vite-plugin-singlefile": "^2.2.0"
+  }
+}

package/uninstall.sh

@@ -0,0 +1,114 @@
+#!/usr/bin/env bash
+
+set -e
+
+# 颜色输出
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# 配置
+INSTALL_DIR="$HOME/figma-to-code-plugin"
+FORCE_UNINSTALL=false
+
+# 打印带颜色的消息
+print_message() {
+  local color=$1
+  local message=$2
+  echo -e "${color}${message}${NC}"
+}
+
+# 主卸载函数
+main() {
+  # 解析命令行参数
+  while [[ $# -gt 0 ]]; do
+    case $1 in
+      -y|--yes|--force)
+        FORCE_UNINSTALL=true
+        shift
+        ;;
+      -h|--help)
+        print_message "$BLUE" "使用方法: $0 [选项]"
+        print_message "$BLUE" "选项:"
+        print_message "$BLUE" "  -y, --yes, --force  跳过确认，强制卸载"
+        print_message "$BLUE" "  -h, --help          显示此帮助信息"
+        exit 0
+        ;;
+      *)
+        print_message "$YELLOW" "未知选项: $1"
+        shift
+        ;;
+    esac
+  done
+
+  print_message "$BLUE" "╔══════════════════════════════════════════════════╗"
+  print_message "$BLUE" "║   Figma to Code Plugin 卸载脚本                  ║"
+  print_message "$BLUE" "╚══════════════════════════════════════════════════╝"
+  echo ""
+
+  # 检查安装目录是否存在
+  if [ ! -d "$INSTALL_DIR" ]; then
+    print_message "$YELLOW" "⚠️  未找到安装目录: $INSTALL_DIR"
+    print_message "$YELLOW" "插件可能已经被卸载或未安装。"
+    exit 0
+  fi
+
+  # 显示将要删除的内容
+  print_message "$YELLOW" "📍 安装目录: $INSTALL_DIR"
+  echo ""
+  print_message "$YELLOW" "将要删除以下内容："
+  ls -lh "$INSTALL_DIR" 2>/dev/null | tail -n +2 | while read line; do
+    echo "   $line"
+  done
+  echo ""
+
+  # 确认卸载
+  if [ "$FORCE_UNINSTALL" = true ]; then
+    print_message "$BLUE" "💪 强制卸载模式"
+  else
+    # 使用 /dev/tty 来确保即使通过管道执行也能读取用户输入
+    if [ -t 0 ]; then
+      # 标准输入是终端
+      read -p "$(echo -e ${RED}确认卸载 Figma to Code Plugin? \(y/N\): ${NC})" -n 1 -r
+      echo
+    else
+      # 标准输入不是终端（通过管道），从 /dev/tty 读取
+      read -p "$(echo -e ${RED}确认卸载 Figma to Code Plugin? \(y/N\): ${NC})" -n 1 -r < /dev/tty
+      echo
+    fi
+    
+    if [[ ! $REPLY =~ ^[Yy]$ ]]; then
+      print_message "$BLUE" "取消卸载"
+      exit 0
+    fi
+  fi
+
+  # 删除安装目录
+  print_message "$BLUE" "🗑️  删除安装目录..."
+  rm -rf "$INSTALL_DIR"
+
+  # 验证删除
+  if [ -d "$INSTALL_DIR" ]; then
+    print_message "$RED" "❌ 卸载失败: 无法删除目录 $INSTALL_DIR"
+    exit 1
+  fi
+
+  # 卸载成功
+  echo ""
+  print_message "$GREEN" "✅ 卸载成功!"
+  print_message "$GREEN" "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+  echo ""
+  print_message "$YELLOW" "📝 提示:"
+  print_message "$YELLOW" "   请在 Figma 中手动移除插件："
+  print_message "$YELLOW" "   Plugins > Development > Remove plugin"
+  echo ""
+  print_message "$GREEN" "如需重新安装，请运行:"
+  print_message "$BLUE" "   curl -fsSL https://unpkg.com/@mico_fe/ftc-plugin@latest/install.sh | bash"
+  echo ""
+}
+
+# 执行主函数
+main "$@"
+